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 相关文章推荐
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
js Dialog 实践分享
Oct 22 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 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
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
php session_decode函数用法讲解
2019/05/26 PHP
jquery 简单应用示例总结
2013/08/09 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
Python基础语法(Python基础知识点)
2016/02/28 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
python根据多个文件名批量查找文件
2019/08/13 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
python如何进行矩阵运算
2020/06/05 Python
python打开文件的方式有哪些
2020/06/29 Python
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
2015个人半年总结范文
2015/03/09 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js