• 华为授权培训中心
  • 腾讯云一级认证培训中心
  • 百度营销大学豫陕深授权运营中心
  • Oracle甲骨文OAEP中心
  • Microsoft Azure微软云合作伙伴
  • Unity公司战略合作伙伴
  • 普华基础软件战略合作伙伴
  • 新开普(股票代码300248)旗下丹诚开普投资
  • 中国互联网百强企业锐之旗旗下锐旗资本投资
联系客服
微信公众号
官方微博
0371-86532888

百度地图API首页数字动态改变特效,h5前端开发人员分享

来源:云和教育 时间:2019-12-19 阅读:101

作为一个h5前端开发人员,对特效始终充满好奇心,虽说自己写过很多特效,但是每当看到一些新的特效,就忍不住要挑战一下自己。偶尔看到百度地图API官网首页的多个数字动态改变的效果(如下图),一时手痒就写了一下。现在把经验总结一下,整理成文章,分享给大家。

截图

图:百度地图官网首页模块(近期改版)

这个效果可以有多种实现方式,我是借助于jQuery的animate()动画实现的,感兴趣的朋友也可以尝试使用计时器setInterval()实现;没有百分百的还原网站,简单进行了布局,但是功能是完全实现了。

1、首先进行布局;HTML结构如下:

步骤截图1

开始和结束处的div.box 是为了撑起页面的高度添加的,因为该特效是页面滚动到一定的距离触发事件。

2、设置css样式,如下:

步骤截图2

3、在页面中添加js代码,因为是使用jQuery的animate动画实现的,因此需要引入jQuery文件;然后编写js代码如下: 步骤截图3

步骤截图4

4、至此,你已经完成了所有的工作,可以在浏览器中测试观看效果了。