利用外层的块级元素负外边距来滚动
1.使用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>index</title> <script type="text/javascript" src="/jq.js"></script> <!-- Date: 2014-02-23 --> <style type="text/css"> /** * * IE6中需要这样设置才会起作用 */ *{ margin: 0; padding: 0; } </style> </head> <body> <div style="overflow:hidden;"> <div style="overflow: hidden;height: 50px;"> <ul class="iscroll"> <li >1</li> <li >2</li> <li>3</li> </ul> </div> </div> <script type="text/javascript" src="/jqplug/iscroll.js"></script> <script type="text/javascript"> $('.iscroll').iscroll({ s:35 }); </script> </body> </html>
2.代码
(function ( $ ) { $.fn.iscroll=function(options){ var settings = $.extend({ s:45 }, options ); $this=this; $height=parseInt(this.height()); $children=this.children(); $clone= $children.clone(); this.prepend($clone); $inter= setInterval(function(){ $margintop=$this.css('margin-top'); $margintop= parseInt($margintop); $childh= parseInt($this.children().height()); if(Math.abs($margintop)>=$height){ $this.css('margin-top',"0px"); }else{ $this.css('margin-top',$margintop-1+"px"); } },settings.s); this.on('mouseover',function(){ clearInterval($inter); }); this.on('mouseout',function(){ $inter=setInterval(function(){ $margintop=$this.css('margin-top'); $margintop= parseInt($margintop); $childh= parseInt($this.children().height()); if(Math.abs($margintop)==$height){ $this.css('margin-top',"0px"); }else{ $this.css('margin-top',$margintop-1+"px"); } },settings.s); }); } }( jQuery ));
3.注意事项
1.不要在调用方法的元素上(示例中.iscroll)使用padding内上下边距
2.里层的<li>元素不要使用外边距但可以使用内边距
4. <style type="text/css"> /** * * IE6中需要这样设置才会起作用 */ *{ margin: 0; padding: 0; } </style>