jQuery插件scroll实现无缝滚动效果


Posted in Javascript onApril 27, 2015

scroll滚动插件

支持上下左右,淡入淡出,滚动时间设置,动画时间设置,鼠标经过是否停止设置

默认配置参数可修改

$(".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 })

html代码:

<!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>

JS核心代码

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

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
小程序实现录音功能
Sep 22 Javascript
Javascript非构造函数的继承
Apr 27 #Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 #Javascript
jquery简单的弹出层浮动层代码
Apr 27 #Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 #Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 #Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 #Javascript
使用console进行性能测试
Apr 27 #Javascript
You might like
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
JS实现php的伪分页
2008/05/25 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
查看python下OpenCV版本的方法
2018/08/03 Python
Python判断telnet通不通的实例
2019/01/26 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
华三通信H3C面试题
2015/05/15 面试题
助人为乐表扬信范文
2014/01/14 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
观后感开头
2015/06/19 职场文书