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 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
python 实现识别图片上的数字
2019/07/30 Python
python爬取音频下载的示例代码
2020/10/19 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
荷兰本土平价百货:HEMA
2017/10/23 全球购物
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
介绍一下gcc特性
2012/01/20 面试题
大学班级学风建设方案
2014/05/01 职场文书
交通志愿者活动总结
2014/06/27 职场文书
活动总结报告怎么写
2014/07/03 职场文书
运动员加油词
2015/07/18 职场文书
2019年工作总结范文
2019/05/21 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技