首页 > 其他 > 详细

横向滚动插件

时间:2014-03-26 02:07:28      阅读:424      评论:0      收藏:0      [点我收藏+]
bubuko.com,布布扣
(function ( $ ) {
    
    $.fn.ilscroll=function(options){
        var settings = $.extend({
      s:45
    }, options );
        $this=this;
        $children=this.children();
        $parent=this.parent();
        $count=$children.size();
        $margin=parseInt($children.css(‘margin-left‘))+parseInt($children.css(‘margin-right‘));

$childrenwidth=$children.width()+$margin;
$parentwidth=$parent.width();
$width=($count*$childrenwidth);
        if($width<$parentwidth){
            return false;
        }
         $clone= $children.clone();
         this.prepend($clone);
        this.width($width*2);
    $inter=    setInterval(function(){
            $marginleft=$this.css(‘margin-left‘);
            
  $marginleft=             parseInt($marginleft);
 $childh=   parseInt($this.children().width());
  if(Math.abs($marginleft)>=$width){
      $this.css(‘margin-left‘,"0px");
  
  }else{
            $this.css(‘margin-left‘,$marginleft-1+"px");
        }
        },settings.s);
            
        this.on(‘mouseover‘,function(){
            clearInterval($inter);
        });
        this.on(‘mouseout‘,function(){
        $inter=setInterval(function(){
            $marginleft=$this.css(‘margin-left‘);
            
  $marginleft=             parseInt($marginleft);
 $childh=   parseInt($this.children().width());
  if(Math.abs($marginleft)==$width){
      $this.css(‘margin-left‘,"0px");
  
  }else{
            $this.css(‘margin-left‘,$marginleft-1+"px");
        }
        },settings.s);
        });
        
    };
    
    }( jQuery ));
bubuko.com,布布扣

 当子元素不比父元素宽时,不会发生滚动。

使用

$(‘.foo‘).ilscroll()

一个参数s用于控制速度.

横向滚动插件,布布扣,bubuko.com

横向滚动插件

原文:http://www.cnblogs.com/zuoxiaobing/p/3623095.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!