利用外层的块级元素负外边距来滚动

1.使用

            
                                          
                      
      
    
       
        
        
                        
         
1
            
         
2
            
         
3
        
        
            
       
      
    

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>