Of Stack

jQuery plugin scroll implements seamless scrolling

  • 2020-06-01 08:18:27
  • OfStack

scroll scroll plugin

Support up and down left and right, fade in and out, scroll time Settings, animation time Settings, mouse over whether to stop setting

The default configuration parameters can be modified

$(".content ").easysroll({// default configuration parameter direction: "left", // scrolling direction left (left) right (right) top(up) bottom(down) default left numberr: "1", // amount of scrolling per time is 1 delays:"1000",// time required to complete 1 animation is 1000 = 1 second scrolling: "1000",// the default time interval for each animation is 1000 = 1 second fadein:false,// whether the default false enterStop:true is supported or not; false enterStop:true // the default is true})

html code: 


<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> Scrolling plug-in (supports up, down, left and right, fade in and out, scroll time setting, animation time setting, mouse over whether to stop setting) </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> Support up and down left and right, fade in and out, scroll time Settings, animation time Settings, mouse over whether to stop setting </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>
// Default configuration parameters <br>
direction: "left", // Rolling direction  left (left) right (to the right)  top( upward ) bottom( down )  The default left<br>
numberr: "1", // every 1 Number of secondary rolls   The default is 1<br>
delays:"1000",// complete 1 Time required for subanimation   The default is 1000 Is equal to the 1 seconds <br>
scrolling: "1000",// every 1 The time interval between the subanimations   The default is 1000 Is equal to the 1 seconds <br>
fadein:false,// Whether to support fade in or fade out   The default false<br>
enterStop:true; // Mouse over whether to pause scrolling   The default is true<br>
<br>
})<br>
<br>
</div>
<script>
$(".content").easysroll({
// Default configuration parameters 
direction: "left", // Rolling direction  left (left) right (to the right)  top( upward ) bottom( down )  The default left
numberr: "1", // every 1 Number of secondary rolls   The default is 1
delays:"1000",// complete 1 Time required for subanimation   The default is 1000 Is equal to the 1 seconds 
scrolling: "1000",// every 1 The time interval between the subanimations   The default is 1000 Is equal to the 1 seconds 
fadein:false,// Whether to support fade in or fade out   The default false
enterStop:true; // Mouse over whether to pause scrolling   The default is true
})
</script>
</body>
</html>

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(" The scrolling direction you configured is incorrect, please reconfigure ");
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);

That's all for this article, I hope you enjoy it.

Related articles: