jQuery实现广告条滚动效果

2019-11-19 15:43:09

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法

下一篇：基于jQuery的表单填充实例