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为某个div加入行样式
Jun 09 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
如何基于jQuery实现五角星评分
Sep 02 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
如何使用GDB调试PHP程序
2015/12/08 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
JavaScript DOM 添加事件
2009/02/14 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
python中函数默认值使用注意点详解
2016/06/01 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
python编程的核心知识点总结
2021/02/08 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
室内设计专业个人的自我评价
2013/12/18 职场文书
物业公司采购员岗位职责
2013/12/31 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
婚庆司仪开场白
2015/05/29 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python