程序博客网 > 重庆指尖网络

动画（滚动）

来源：互联网发布：重庆指尖网络编辑：程序博客网时间：2024/06/16 18:40

实现列表元素向上依次滚动，底部能无缝连接，实现一个动画效果。当鼠标停留在某一个元素上，停止滚动，移开鼠标，继续滚动

html代码：

<body>
       <div id="div1">
           <li>苹果</li>
           <li>橘子</li>
           <li>香蕉</li>
           <li>西瓜</li>
           <li>梨子</li>
           <li>李子</li>
           <li>火龙果</li>
           <li>葡萄</li>
           <li>芒果</li>
           <li>圣女果</li>
           <li>橙子</li>
       </div>
   </body>

css代码：

<style>
           *{margin: 0px;padding: 0px;}
           #div{
               height: 200px;
               width: 200px;
               border: 1px solid #ccc;

           }
           #div1{
               height: 230px;
               width: 200px;
               border: 1px solid #ccc;
               margin: 20px auto;
               padding-top: 0px;
               overflow: hidden;
           }
           #div1 li{
               list-style: none;
               padding-left: 6px;
               border-bottom: 1px dashed #ccc;
           }
       </style>

JS代码：

<script>
           var marginTop = 0; //上外边距
           var isStop = false;
           //定时函数，每200毫秒执行一次
           setInterval(function(){
               if(isStop)
                   return;   //动画是执行还是停止
               $("#div1 li:first").animate({   //第一个li执行动画
                   marginTop:marginTop--    //设置上面的外边距自减
               },0,function(){ //动画之后执行的函数
                   var $f = $(this);
                   if(-marginTop == $(this).height()+1){ //判断li移动的距离是否超过自身的高度
                       $f = $(this).clone(true);   //复制一个li
                       $(this).remove();   //把第一个移除。如果第一个移除，那么第二个就自动第一个了
                       marginTop=0;
                       $f.css("margin-top","0px");
                       $("#div1").append($f);   //把第一个又追加到列表的最后，变成一个无缝连接
                   }
               });
           },150);
           $(function(){
               $("#div1 li").hover(
                   function(){isStop=true;},
                   function(){isStop=false;}
               );
           });
       </script>

阅读全文

0 0

重庆指尖网络

重庆指尖网络

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子人文大学人文地理学人文情怀人文社科影视同人文兽人文推荐人文历史人文教育医学人文人文英语人文类人文是什么什么是人文湖南人文科技学院重庆人文科技学院人文科技学院中华民族人文初祖重庆人文科技学院教务系统经典人文地理北京人文大学人文知识竞赛题库人文地理与城乡规划专业人文知识竞赛人文地理与城乡规划人文什么意思人文社科类专业驼铃成都人文人文始祖是谁人文是什么意思人文主义名词解释人文科学包括哪些学科人文社会科学人文教育专业人文素养心得体会同人文长春工业大学人文信息学院贵州民族大学人文科技学院夺舍之再世为人文理风医师定期考核人文试题及答案千人斩斩破九重天