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 相关文章推荐
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
JavaScript数据类型详解
Apr 01 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
elementui实现预览图片组件二次封装
Dec 29 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的error_reporting错误级别变量对照表
2014/07/08 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
php中如何执行linux命令详解
2018/11/06 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
JS定时器实例
2013/04/17 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
Python线性方程组求解运算示例
2018/01/17 Python
python实现内存监控系统
2021/03/07 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
Python计算IV值的示例讲解
2020/02/28 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
Python3读写ini配置文件的示例
2020/11/06 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
nohup的用法
2014/08/10 面试题
保送生自荐信范文
2013/10/06 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
Python中如何处理常见报错
2022/01/18 Python
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
Python实现批量自动整理文件
2022/03/16 Python
nginx之内存池的实现
2022/06/28 Servers