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 相关文章推荐
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jQuery实现简单弹幕制作
Dec 10 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中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
3种php生成唯一id的方法
2015/11/23 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
javascript hasFocus使用实例
2010/06/29 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
Python数组定义方法
2016/04/13 Python
Python自动生产表情包
2017/03/17 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
实例详解Python装饰器与闭包
2019/07/29 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
会计实习生自我鉴定
2013/12/12 职场文书
个人先进事迹总结
2015/02/26 职场文书
努力工作保证书
2015/02/28 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
Window server中安装Redis的超详细教程
2021/11/17 Redis
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers