jQuery实现广告条滚动效果


Posted in jQuery onAugust 22, 2017

本文实例为大家分享了jQuery实现广告条滚动效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{padding: 0px;margin: 0px;}
      #list{width: 150px;height: 310px;margin: 0px auto;border: 1px solid #ccc;overflow: hidden;}
      #list li{list-style: none;height: 30px;line-height: 30px;border-bottom: 1px dashed #999;}
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
    <script>
      var marginTop = 0;//注意命名
      var scroll = true; 
      //定时函数,每150毫秒执行一次函数
      setInterval(function(){
        if(scroll){ 
          $("#list li:first").animate(  //第一个li开始执行动画
            {marginTop:marginTop--}, //设置上面的外边距自减
            0,
            function(){  //动画之后执行的函数

              if( -marginTop==$(this).height()+1){ //判断li移动的距离是否超过自身的高度
                var $f = $(this); //复制一个li
                $(this).remove(); //把第一个移除。第一个移除之后,第二个就自动变为第一个
                marginTop=0;
                $f.css("margin-top","0px");
                $("ul").append($f); //把第一个追加加到列表的最后,变成一个无缝连接
              }
            }
          );
        }
      },150);
      $(function(){
        $("ul").hover(function(){scroll = false;},function(){scroll = true;});

      });
    </script>
  </head>
  <body>
    <div id="list">
      <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>
      </ul>
    </div>
  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
基于jQuery的表单填充实例
Aug 22 #jQuery
使用jQuery实现简单的tab框实例
Aug 22 #jQuery
JQuery判断正整数整理小结
Aug 21 #jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 #jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 #jQuery
jQuery实现表格冻结顶栏效果
Aug 20 #jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 #jQuery
You might like
php获取目标函数执行时间示例
2014/03/04 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
php实现微信支付之退款功能
2018/05/30 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
入党自我鉴定范文
2013/10/04 职场文书
小学毕业演讲稿
2014/04/25 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
git stash(储藏)的用法总结
2022/06/25 Servers