视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
基于编写jQuery的无缝滚动插件_jquery
2020-11-27 21:25:43 责编:小采
文档
 首先来看下html骨架,如下:


 
 
  • 111
  • 222
  • 333
  • 结构简单明了,没什么说的。

    讲下实现原理:
      div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出box的。
      我们通过js控制 ul 标签的margin 来实现滚动。横向滚动则是控制 margin-left ; 纵向滚动则是控制 margin-top;
      初始状态时,我们还要进行条件判断,判断是否进行滚动。即: 当 ul 长度小于 外层 box 长度时不进行滚动,反之则进行滚动。
      ul 的长度是通过计算得来的,即: ul 里面单个 li 的长度乘以 li 的个数。 ul_width = li_width * li_num;
      之所以能实现无缝滚动,是因为每次滚动的长度刚好大于单个 li 的长度时,我们就将ul的第一个 li 移动到ul的最后,周而复始,无限循环(关于这
      一点,你可以先不设置 overflow:hidden 来查看)。
      
    讲个原理太TM考验我的表达能力了,希望我讲清楚了。

    看插件的实现代码吧:

    
    
    

    基本的代码说明注释写的很清楚了。下面对个别知识点作下讲解:

    1.) var timer=[]; 之前timer并不是声明为数组类型的,是在我写demo的时候,由于页面同时存在两个无缝滚动的应用(为了演示横向和纵向), 出现了bug。

    因为他们两个共用了一个timer计时器,当鼠标进入其中一个时,另一个的timer也被clear了。之后修改代码将其声明为数组对象,再通过root.each()就实
    现了每个插件应用都有自己的timer计时器,互不干扰。也就是说此插件支持页面同时存在多个无缝滚动应用。

    2.) outerWidth() /outerHeight()函数。 这个函数比较强大,它获取的不仅仅是元素的宽度/高度,

    实际上 outerWidth()=width+borderLeft+borderRight+marginLeft+marinRight;
    当它设置为true后,即:outerWidth(true),它也会将padding计算进来:
    outerWidth()=width+borderLeft+borderRight+marginLeft+marinRight+paddingLeft+paddingRight;

    怎么样,是不是很强大啊!

    下面给出DEMO代码:

    
    
    
    
    
    
    
    
    
    
     
     
     
  • 111纵向
  • 222纵向
  • 333纵向
  • 444纵向
  • 555纵向
  • 666纵向
  • 111横向
  • 222横向
  • 333横向
  • 444横向
  • 555横向
  • 666横向
  • ul长度小于box长度,不滚动
  • 222横向
  • 333横向
  • 效果图片:

    演示因为样式问题,大家可以自行美化。

    下载本文
    显示全文
    专题