jq封裝-無縫滾動效果
阿新 • • 發佈：2017-11-30
over == line tac 表示 動效 dir app timer
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>無縫滾動</title> <style> *{ margin:0; padding: 0; } .outer{ position: relative; margin:30px auto; border:1px solid #ccc; border-radius: 5px; overflow: hidden; } .outer1{ width: 300px; height: 100px; } .outer1 ul{ width: 100%; } .outer1 li{ margin-bottom: 10px; } .outer ul{ position: absolute; top: 0; list-style: none; overflow: auto; } li{ line-height: 20px; text-align: center; word-break: break-all; } .outer2{ width: 80%; height: 20px; line-height: 20px; white-space: nowrap; } .outer2 li{ float: left; margin-right: 30px;; height: 100%; vertical-align: top; } </style> </head> <body> <div class="outer outer1"> <ul> <li>1111111111111111111111111111111111111111111111111111111111111111111111111</li> <li>222</li> <li>333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</li> <li>44444</li> <li>5555</li> <li>666</li> <li>77777777777777777777777777777777777777777777777777777777777777777777777777</li> <li>888888</li> </ul> </div> <div class="outer outer2"> <ul> <li>11111111111111111111111111</li> <li>222222222222222222222222222222222</li> <li>3333333333333333333333333</li> <li>44444</li> <li>5555</li> <li>666666666666666666666666666666666666666666666666666666666666</li> <li>777777777777777</li> <li>888888</li> </ul> </div> </body> <script src="../../../js/jquery-1.11.3.min.js"></script> <script> $(function(){ /* var $outer=$(".outer1"),$ul=$(".outer1>ul"),$h=$ul.height(),$outerH=$outer.height(),step=0,timer=null; function move(){ var top = $ul.position().top,$li=$ul.find("li").eq(0),hei=$li.height(); if(top==-hei){ var origin = $li.detach(); $ul.append(origin).css("top",top+hei); } $ul.css("top",--$ul.position().top); timer=window.setTimeout(move,20); } function clear(){ clearTimeout(timer); timer=null; } move(); $outer.hover(function(){ clear(); },function(){ move(); });*/ $.fn.scroll=function(opt){ var timer; function move(){ var range,_val,origin,$li=opt.list.find("li").eq(0); if(opt.direction == "top"){ range=opt.list.position().top; _val=parseFloat($li.height())+parseFloat($li.css("marginTop"))+parseFloat($li.css("marginBottom")); if(range==-_val){ origin = $li.detach(); opt.list.append(origin).css("top",range+_val); } if(opt.el.height() <= opt.list.height()){ opt.list.css("top",--opt.list.position().top); } }else{ range=opt.list.position().left; _val=parseFloat($li.width())+parseFloat($li.css("marginRight"))+parseFloat($li.css("marginLeft")); if(range==-_val){ origin = $li.detach(); opt.list.append(origin).css("left",range+_val); } if(opt.el.width() <= opt.list.width()){ opt.list.css("left",--opt.list.position().left); } } timer=window.setTimeout(move,opt.time); } function clear(){ clearTimeout(timer); timer=null; } move(); opt.el.hover(function(){ clear(); },function(){ move(); }); }; //el表示容器。 //list表示容器中的列表ul //direction表示方向 top為豎向滾動 left為橫向滾動
// time表示滾動時間 一般為10 20 30較為合適 $.fn.scroll({el:$(".outer1"),list:$(".outer1>ul"),direction:‘top‘,time:20}); $.fn.scroll({el:$(".outer2"),list:$(".outer2>ul"),direction:‘left‘,time:10}); }) </script> </html>
jq封裝-無縫滾動效果