zoukankan      html  css  js  c++  java
  • 横向滚动插件

    (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 ));
    
  • 相关阅读:
    centos7如何将docker容器配置成开机自启动
    Linux磁盘和文件系统扩容彻底研究
    Linux 系统中用Systemd 管理系统服务
    让程序员从运维工作中解放出来
    为什么linux系统中init被systemd替换了
    网页是如何实现从剪贴板从读取图片并上传到server的
    局域网中win10作为服务器,其他机器无法连接怎么办
    docker attach 和 exec 用法区别
    怎么理解linux作业(job),与进程(process)的关系
    HashMap和ConcurrentHashMap 源码关键点解析
  • 原文地址:https://www.cnblogs.com/zuoxiaobing/p/3623095.html
Copyright © 2011-2022 走看看