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 相关文章推荐
javascript web对话框与弹出窗口
Feb 22 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 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
两个开源的Php输出Excel文件类
2010/02/08 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
JS中常用的消息框总结
2018/02/24 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
记录Django开发心得
2014/07/16 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
PyQt5实现简易计算器
2020/05/30 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
利用Python优雅的登录校园网
2020/10/21 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
应届本科毕业生求职信
2014/07/23 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
2014年环保工作总结
2014/11/26 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android