jquery实现简单的无缝滚动


Posted in Javascript onApril 15, 2015

jquery实现简单的无缝滚动

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
</head>
<style>
  *{ margin: 0px; padding: 0px;}
  li{ list-style: none;}
  .content{ width: 1020px; height:112px; overflow: hidden; border: #4e83c2 solid 1px; margin:50px auto; }
  .content ul{ width: 1020px; height:100px;}
  .content ul li{ float: left; width: 100px; height: 100px; border:#ccc solid 1px; display: block; margin: 5px;}

</style>
<body>
<div class="content">
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
</ul>
</div>
<script>
 function scroll(){
 $(".content ul").animate({"margin-left":"-110px"},function(){
   $(".content ul li:eq(0)").appendTo($(".content ul"))
   $(".content ul").css({"margin-left":0})
 })
 }
  setInterval(scroll,1000)
</script>
</body>
</html>

scroll()用法:

function scroll(){
   $(".content ul").animate({"margin-left":"-110px"},function(){
   //这个是让整个ul先向前滑动个li ,如果要一次性滑动5个~那么就是550px.
  //想向上滚动就改成 $(".content ul").animate({"margin-top":"-105px"}
  //想向下滚动就改成 $(".content ul").animate({"margin-top":"105px"}
  //想向右滚动就改成 $(".content ul").animate({"margin-left":"110px"}
     $(".content ul li:eq(0)").appendTo($(".content ul"))
     $(".content ul").css({"margin-left":0})
  //对应这的这边
  //想向上滚动就改成 $(".content ul").animate({"margin-top":0}
  //想向下滚动就改成 $(".content ul").animate({"margin-top":0}
  //想向右滚动就改成 $(".content ul").animate({"margin-left":0}
   })
   }
    setInterval(scroll,1000)
  //这上面的是1000是滚动的速度,可以自己调整

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js身份证验证超强脚本
Oct 26 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
微信小程序实现animation动画
Jan 26 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 #Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 #Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 #Javascript
JS扩展方法实例分析
Apr 15 #Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 #Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 #Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 #Javascript
You might like
php防注
2007/01/15 PHP
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
JQuery选择器特辑 详细小结
2012/05/14 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
Python常用模块介绍
2014/11/21 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
中医药大学市场营销专业自荐信
2013/09/29 职场文书
行政助理的职责
2013/11/14 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
公司承诺书格式
2014/05/21 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
2015年女职工工作总结
2015/05/15 职场文书
正规借条模板
2015/05/26 职场文书
师德培训心得体会2016
2016/01/09 职场文书