• 横向滚动插件


    (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 ));

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

    使用

    $('.foo').ilscroll()

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

    修改用于应对margin-auto

    (function ( $ ) {
    	
    	$.fn.ilscroll=function(options){
    		var settings = $.extend({
          s:45
        }, options );
    		$this=this;
    		$children=this.children();
    		$parent=this.parent();
    		$count=$children.size();
    		$marginleft=$children.css('margin-left')=='auto'?0:parseInt($children.css('margin-left'));
    		if($children.css){
    			
    		}
    		$children.css('margin-left','0px');
    		$children.css('margin-right','0px');
    		$margin=parseInt($children.css('margin-left'))+parseInt($children.css('margin-right'));
    
    $childrenwidth=parseInt($children.width())+$margin;
    $parentwidth=parseInt($parent.width());
    $width=($count*$childrenwidth);
    		if($width<$parentwidth){
    			return ;
    		}else{
    		
    		 $clone= $children.clone();
    		 this.prepend($clone);
    		this.width($width*2);
    		}
    	$inter=	setInterval(function(){
    			$marginleft=$this.css('margin-left');
    		if($marginleft==='auto'){
    			$marginleft=0;
    		}else{
    			 $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 ));
    
  • 相关阅读:
    HbuildeX项目打包
    百度地图(vue)
    压缩图片
    安卓移动端唤起拨号与邮箱
    上传图片 原生或vant
    git从零开始
    HbuilderX,监视物理按键
    gitlab备份and恢复数据
    ⑨.kubernetes 之ingress
    ⑧.kubernetes pod调度
  • 原文地址:https://www.cnblogs.com/zuoxiaobing/p/3623095.html
Copyright © 2020-2023  润新知