网站建设资讯

NEWS

网站建设资讯

JS轮播图中缓动函数的封装-创新互联

轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~

创新互联主要从事成都网站设计、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务梅州,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

我们从需求的角度开始,首先给出一个简单需求:

1、我想让页面中的一个盒子从开始的位置匀速向右运动到200px的地方,该怎么实现?

分析:

1)我们需要知道盒子在哪个地方,这个可以通过offsetLeft属性去获取;

2)要让盒子匀速运动,对于js肯定需要setInterval了;

3)要让盒子向右边跑起来?那就是需要不停改变盒子与左边起始点的距离,有margin-left,还有定位的left,这里我选择了改变绝对定位的left;

4)跑到离开始点200px的距离我们要停下来,使用clearInterval就可以了。

接下来直接上代码了  



 
  
  Document
  
 

 
  

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章名称:JS轮播图中缓动函数的封装-创新互联
当前路径:http://cdweb.net/article/pcocp.html