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函数库-集合框架
Apr 27 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
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
smarty内置函数section的用法
2015/01/22 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
python获取糗百图片代码实例
2013/12/18 Python
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
使用Python的PEAK来适配协议的教程
2015/04/14 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
为什么python比较流行
2020/06/19 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
酒店总经理助理岗位职责
2014/02/01 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android