位置: 编程技术 - 正文

jQuery插件实现无缝滚动特效(jquery插件使用教程)

编辑:rootadmin

推荐整理分享jQuery插件实现无缝滚动特效(jquery插件使用教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery插件怎么用到自己的网站,jquery插件使用,jquery22插件网,jquery插件使用,简单的jquery插件实例,jquery 插件写法,jquery插件使用,jquery插件使用教程,内容如对您有帮助,希望把文章链接给更多的朋友!

首先来看下html骨架,如下:

结构简单明了,没什么说的。

讲下实现原理:

  div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出box的。

  我们通过js控制 ul 标签的margin 来实现滚动。横向滚动则是控制 margin-left ; 纵向滚动则是控制 margin-top;

  初始状态时,我们还要进行条件判断,判断是否进行滚动。即:当 ul 长度小于 外层 box 长度时不进行滚动,反之则进行滚动。

jQuery插件实现无缝滚动特效(jquery插件使用教程)

  ul 的长度是通过计算得来的,即: ul 里面单个 li 的长度乘以 li 的个数。 ul_width = li_width * li_num;

  之所以能实现无缝滚动,是因为每次滚动的长度刚好大于单个 li 的长度时,我们就将ul的第一个 li 移动到ul的最后,周而复始,无限循环(关于这一点,你可以先不设置 overflow:hidden 来查看)。

插件的实现代码:

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

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代码:

效果图片:

标签: jquery插件使用教程

本文链接地址:https://www.jiuchutong.com/biancheng/373826.html 转载请保留说明!

上一篇:Jquery ajax加载等待执行结束再继续执行下面代码操作

下一篇:基于jquery实现简单的手风琴特效(jquery使用教程)

  • 进项税额转出要补所得税吗
  • 个人所得税手续费返还时间
  • 企业当期的所得税费用
  • 应交税费是什么科目
  • 应收出口退税金额无法收回怎么做账?
  • 发现之前的差旅费补助多报了一天该怎么调整
  • 固定资产盘点折旧怎么算
  • 每股收益无差别点计算公式怎么解
  • 不认证的发票可以抵扣吗
  • 以货换货要开发票吗
  • 个人厂房租赁税率是多少
  • 税务注销后还能稽查吗
  • 增值税税率如何计算
  • 商贸公司批发零食怎么样
  • 收到应收的货款的会计分录
  • 工资扣保险怎么做凭证
  • 企业发现多缴税款超过3年
  • 高新技术企业认定管理办法
  • 退休人员兼职工资交税吗?
  • 利润负数所得税怎么算
  • 往年的年报填错了怎么办
  • 印花税分配比例
  • 预存500抵扣1000是几折活动?
  • 以前年度应付账款做到制造费用如何改账
  • 行政单位捐赠收入需要上缴财政吗
  • 一体机笔记本电脑
  • Kamikōchi, Nagano Prefecture, Japan (© sadao/Shutterstock)
  • 期间损益结转都结转什么
  • 收到投标保证金利息如何账务处理
  • yolov5损失
  • nginx ss
  • joomla模板制作教程
  • phpsql防注入代码
  • 如何快速使用验证码
  • ecshop有哪些bug
  • 六款小巧的HTTP Server[C语言] 贵贵的博客 开发|架构|开源|共享
  • wordpress修改数据库
  • 加班补贴费
  • 转出未交增值税借方余额表示什么
  • 错账调整分录
  • SQL server 2008中的数据库能否只包含数据文件
  • sql server2005怎么打开
  • 专票不抵扣认证怎么操作
  • 财务费用应付利息
  • 个人无需办理汇票业务
  • 完整的会计核算流程
  • 本年利润怎么结转成未分配利润
  • 企业培训费怎么入账
  • 购买的车位如何做账
  • 收到开错的发票怎么办
  • 公户转私户的钱会退回吗
  • 食品企业产品
  • 暂估商品会计分录
  • 企业以非货币资产交换方式取得的长期股权投资
  • 错误的原始凭证是什么
  • mssql数据库的账号密码
  • mysql免安装版怎么使用
  • ghost装机顺序
  • 文件夹字体变成蓝色怎么恢复
  • linux系统中安装软件
  • starting windows
  • win7删除文件
  • perl如何使用
  • nodejs 用途
  • ubuntu20.04怎么安装
  • sed基本用法
  • JavaScript中Number.MIN_VALUE属性的使用示例
  • nodejs基础教程
  • unity效率
  • JavaScript中的变量名不区分大小写
  • unity最新教程
  • python数组定义方法
  • 税务部门公务员报考条件
  • 中国税务定额发票怎么开
  • 江苏省全电发票开通流程
  • 河南12306区号
  • 个人所得税税单去哪里打印
  • 法院拍卖的预售房产怎么交税
  • 2020年个税截止时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设