jQuery plug-in scroll achieves seamless scrolling effect

jQuery plug-in scroll achieves seamless scrolling effect_jquery

WBOY

Release： 2016-05-16 16:01:58

Original

1674 people have browsed it

scroll plugin

Supports up, down, left and right, fade in and out, scroll time setting, animation time setting, and whether to stop setting when the mouse passes

Default configuration parameters can be modified

$(".content").easyroll({ //Default configuration parameter direction: "left", //Scrolling direction left (left) right (right) top (up) bottom (down) Default left numberr: "1", //The default number of each scroll is 1 delays: "1000", //The default time required to complete an animation is 1000, which is equal to 1 second scrolling: "1000", //The default time interval of each animation Is 1000 equal to 1 second fadein:false,//Whether it supports fade-in or fade-out, the default is false enterStop:true //Whether the mouse moves in to pause scrolling, the default is true })

html code:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>滚动插件（支持上下左右，淡入淡出，滚动时间设置，动画时间设置，鼠标经过是否停止设置）</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/scroll.js" type="text/javascript"></script>
</head>
<style>
*{ margin: 0px; padding: 0px;}
.content{ width: 1010px; height:102px; overflow: hidden; border: #4e83c2 solid 1px; margin:50px auto; }
.content ul{list-style: none; margin: 0px; padding: 0px; }
.content ul li{ width: 100px; height: 100px; border:#ccc solid 1px; overflow: hidden;cursor: pointer;}
</style>
<body>
<h1>支持上下左右，淡入淡出，滚动时间设置，动画时间设置，鼠标经过是否停止设置</h1>
<div class="content">
<ul type="box">
<li><img src="uploads/allimg/150210/1-15021010125I64-lp.jpg"></li>
<li><img src="uploads/allimg/150210/1-1502100934032T-lp.png"></li>
<li><img src="uploads/allimg/150209/1-1502092312470-L.gif"></li>
<li><img src="uploads/allimg/150209/1-1502091243010-L.jpg"></li>
<li><img src="uploads/allimg/150208/1-15020Q549320-L.jpg"></li>
<li><img src="uploads/allimg/150204/1-150204143012445.jpg"></li>
<li><img src="uploads/150208/1-15020Q94340510.jpg"></li>
<li><img src="uploads/150207/1-15020GG54I43.jpg"></li>
<li><img src="uploads/allimg/131024/89.jpg"></li>
<li><img src="uploads/allimg/131024/85.png"></li>
<li><img src="uploads/allimg/131024/84.png"></li>
<li><img src="uploads/allimg/131024/83.jpg"></li>
<li><img src="uploads/allimg/131024/82.png"></li>
<li><img src="uploads/allimg/131024/81.png"></li>
<li><img src="uploads/allimg/131024/78.png"></li>
</ul>
</div>
<div>
$(".content").easysroll({<br>
//默认配置参数<br>
direction: "left", //滚动方向 left（向左）right（向右） top(向上) bottom(向下) 默认left<br>
numberr: "1", //每一次滚动数量 默认是1<br>
delays:"1000",//完成一次动画所需时间 默认是1000等于1秒<br>
scrolling: "1000",//每一次动画的时间间隔 默认是1000等于1秒<br>
fadein:false,//是否支持淡入或淡出 默认false<br>
enterStop:true; //鼠标移入是否暂停滚动 默认是true<br>
<br>
})<br>
<br>
</div>
<script>
$(".content").easysroll({
//默认配置参数
direction: "left", //滚动方向 left（向左）right（向右） top(向上) bottom(向下) 默认left
numberr: "1", //每一次滚动数量 默认是1
delays:"1000",//完成一次动画所需时间 默认是1000等于1秒
scrolling: "1000",//每一次动画的时间间隔 默认是1000等于1秒
fadein:false,//是否支持淡入或淡出 默认false
enterStop:true; //鼠标移入是否暂停滚动 默认是true
})
</script>
</body>
</html>

Copy after login

JS core code

(function ($) {
$.fn.easysroll= function(options) {
var parameter= {
direction: "left",
numberr: "1",
delays:"1000",
scrolling: "1000",
fadein: false,
enterStop:true
};
var ops = $.extend(parameter,options);
var $this=$(this);
var _this=this;
var _time=null;
var obj=_this.find("[type='box']");
var items=obj.find("li");
var itemsleg=items.length;
var itemsW=items.outerWidth(true);
var itemsH=items.outerHeight(true);
var _direction=ops.direction;
var _numberr =ops.numberr;
var _delays=ops.delays;
var _scrolling =ops.scrolling;
var _fadein=ops.fadein;
var _enterStop=ops.enterStop;
if(_direction=="top" || _direction=="bottom")
{
items.css({"float":"none"});
obj.width(itemsW*itemsleg);
if(_direction=="bottom") {
obj.css("margin-top",-_numberr*itemsH);
}
}else if(_direction=="left" || _direction=="right"){
items.css({"float":"left"});
obj.width(itemsW*itemsleg);
if(_direction=="right") {
obj.css("margin-left",-_numberr*itemsW);
}
}else{
alert("您配置的滚动方向有误，请重新配置");
return true;
}
function scroll(){
if(_direction=="left"){
obj.animate({"margin-left":-_numberr*itemsW},Number(_delays),function(){
for (var i=0;i<_numberr;i++){
obj.find("li").eq(0).appendTo(obj);
}
obj.css({"margin-left":0})
if(_fadein){
obj.find("li").eq(0).animate({"opacity":0},Number(_delays));
obj.find("li").eq(itemsleg-1).css({"opacity":1});
}
});
}else if(_direction=="right"){
obj.animate({"margin-left":0},Number(_delays),function(){
for(var i=0;i<_numberr;i++){
obj.find("li").eq(itemsleg-1).prependTo(obj);
};
obj.css("margin-left",-_numberr*itemsW);
if(_fadein){
obj.find("li").eq(0).animate({"opacity":1},Number(_delays));
obj.find("li").eq(itemsleg-1).css({"opacity":0});
}
});
}else if(_direction=="top"){
obj.animate({"margin-top":-_numberr*itemsH},Number(_delays),function(){
for (var i=0;i<_numberr;i++){
obj.find("li").eq(0).appendTo(obj);
}
obj.css({"margin-top":0});
if(_fadein){
obj.find("li").eq(0).animate({"opacity":0},Number(_delays));
obj.find("li").eq(itemsleg-1).css({"opacity":1});
}
});
}else if(_direction=="bottom"){
obj.animate({"margin-top":0},Number(_delays),function(){
for(var i=0;i<_numberr;i++){
obj.find("li").eq(itemsleg-1).prependTo(obj);
}
obj.css("margin-top",-_numberr*itemsH);
if(_fadein){
obj.find("li").eq(0).animate({"opacity":1},Number(_delays));
obj.find("li").eq(itemsleg-1).css({"opacity":0});
}
});
}
}
$this.hover(function(){
if(_enterStop){
clearInterval(_time);
}
},function(){
_time= setInterval(scroll,_scrolling);
}).trigger('mouseleave');
}
})(jQuery);

Copy after login

The above is the entire content of this article, I hope you all like it.