博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
横向滚动插件
阅读量:7075 次
发布时间:2019-06-28

本文共 3154 字,大约阅读时间需要 10 分钟。

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

 

转载于:https://www.cnblogs.com/zuoxiaobing/p/3623095.html

你可能感兴趣的文章
Shell理论学习(一)
查看>>
phpcms开发之模板语法规则
查看>>
CST UTC
查看>>
因为看见,所以发现:QBotVariant谢绝落幕
查看>>
我的友情链接
查看>>
让Apache支持shtml实现include文件解析的配置方法
查看>>
软件测试学习:检查产品说明书
查看>>
linux 防火墙
查看>>
mysql事务提交模式
查看>>
word search 此题若会,所有dfs矩阵全会
查看>>
ASP.NET Cache的一些总结2
查看>>
JAVA中易出错的小问题(二)
查看>>
asp.net 用正则表达式过滤内容中的电话,qq,email
查看>>
1109 Group Photo
查看>>
Flutter插件开发之APK自动安装
查看>>
创建本地CM 离线服务器
查看>>
PHP数组操作——取数组最后一个值
查看>>
springboot集成swagger2
查看>>
node.js学习之流解析(一)
查看>>
YxdIOCP (DIOCP修改版)
查看>>