JQ封装切换滚动功能
博客园将不进行维护，转站到我的个人博文：地址
/*---------控制滚动图片v1(作者:SFLYQ)-----------
Options 配置对象，（用来配置控制元素的dom位置，初始化一些必要的对象或者方法）
DoIni 初始化操作（初始化元素的jq对象，以及事件绑定等）
DoMove 控制图片现在模块的移动（控制的方向又用户传入）
BindMoveItem根据dom位置，绑定这个元素为初始化选中，并显示在第一个，
*/
效果地址：http://pro9505d48a.isitestar.cn/
代码下载地址：https://github.com/SFLAQiu/SFLAQiu.JQPack.ControlMoveDiv/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Style/Default.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
.iconLeft{float:left; display:block; border:1px solid green; height:150px; width:50px;}/*左边按钮*/
.iconRight { float:left;display:block; border:1px solid green; height:150px; width:50px;}/*右边按钮*/
.picList{float:left; position: absolute; width:800px; left:0px; }/*移动模块*/
.picList li{float:left; border:1px solid red; border:1px solid red; height:150px; width:200px;list-style:none; }/*移动项*/
.picWrap{ float:left; overflow:hidden; height:150px; width:800px; border:1px solid blue;}/*移动范围模块*/
/*效果*/
.on{ background-color:#808080;}/*选中效果*/
</style> </head>
<body>
<div>
<a class="iconLeft" href="javascript:;" onclick="MoveByBtn.DoMove('l');return false;"><</a>
<div id="RangeBox" style="position: relative;" class="picWrap">
<div id="MoveBox" class="picList">
<ul>
<li>111111<span style="display:none;color:red;">√</span></li>
<li>222222<span style="display:none;color:red;">√</span></li>
<li>333333<span style="display:none;color:red;">√</span></li>
<li>4444444<span style="display:none;color:red;">√</span></li>
<li>5555<span style="display:none;color:red;">√</span></li>
<li>666<span style="display:none;color:red;">√</span></li>
<li>77<span style="display:none;color:red;">√</span></li>
<li>8<span style="display:none;color:red;">√</span></li>
<li>9<span style="display:none;color:red;">√</span></li>
<li>10<span style="display:none;color:red;">√</span></li>
<li>11<span style="display:none;color:red;">√</span></li>
<li>12<span style="display:none;color:red;">√</span></li>
</ul>
</div>
</div>
<a class="iconRight" href="javascript:;" onclick="MoveByBtn.DoMove('r');return false;">></a>
</div> <script src="JS/jquery.1.9.1.min.js" type="text/javascript" ></script>
<script src="JS/jquery.easing.min.js" type="text/javascript" ></script>
<script type="text/javascript" >
/*---------控制滚动图片v1(作者:SFLYQ)-----------
Options 配置对象，（用来配置控制元素的dom位置，初始化一些必要的对象或者方法）
DoIni 初始化操作（初始化元素的jq对象，以及事件绑定等）
DoMove 控制图片现在模块的移动（控制的方向又用户传入）
BindMoveItem根据dom位置，绑定这个元素为初始化选中，并显示在第一个，
*/
var MoveByBtn = {};
MoveByBtn = {
Options: {
moveBoxDom: "#MoveBox",//移动块html元素的dom位置
moveBoxItemsDom: "#MoveBox ul li",//移动项html元素的dom位置
moveRangeBoxDom: "#RangeBox",//移动范围块html元素的dom位置
selectItemsDom: "#MoveBox ul li",//选中项html元素的dom位置
selectClass: "on",//选中效果类名
clickDoFn: function () { }//点击选中项后操作（在所有操作之后）
},
moveItemLength: 0,//移动项的总个数
moveWidth: 0,//每次移动的长度
moveBoxJq: null,//移动块的JQ对象
moveRangeBoxJq: null,//移动范围块的JQ对象
moveBoxItemJqs: null,//移动项JQ对象集合
selectItemsJq: null,//选中项JQ对象集合
// 初始化操作
DoIni: function (iniObj) {
MoveByBtn.moveBoxJq = $(MoveByBtn.Options.moveBoxDom);
MoveByBtn.moveRangeBoxJq = $(MoveByBtn.Options.moveRangeBoxDom);
MoveByBtn.moveBoxItemJqs = $(MoveByBtn.Options.moveBoxItemsDom);
MoveByBtn.selectItemsJq = $(MoveByBtn.Options.selectItemsDom); MoveByBtn.Options = $.extend(MoveByBtn.Options, iniObj);
MoveByBtn.moveWidth = $(MoveByBtn.moveBoxItemJqs[0]).outerWidth(true);
MoveByBtn.moveItemLength = MoveByBtn.moveBoxItemJqs.length;
var getRestrictWidth = MoveByBtn.moveBoxItemJqs.length * MoveByBtn.moveWidth - MoveByBtn.moveRangeBoxJq.width();
//初始化点击
MoveByBtn.moveBoxItemJqs.click(function () {
MoveByBtn.DoItemClick(this);
return false;
}); //初始化范围这个的宽度
MoveByBtn.moveBoxJq.css({ "width": MoveByBtn.moveItemLength * MoveByBtn.moveWidth + "px" });
MoveByBtn.moveBoxJq.css({ left: "0px", position: "absolute" });
},
//移动操作
DoMove: function (movePos) {
MoveByBtn.moveBoxJq.stop(false, true);
var getNowLeft = parseInt(MoveByBtn.moveBoxJq.css("left"), 10);
var needMoveLeft = 0;
MoveByBtn.DoItemSelect(movePos);
if (movePos == "r") {
needMoveLeft = getNowLeft - MoveByBtn.moveWidth;
var getRestrictWidth = MoveByBtn.moveBoxItemJqs.length * MoveByBtn.moveWidth - MoveByBtn.moveRangeBoxJq.width();
if (needMoveLeft * -1 > getRestrictWidth) return;
} else if (movePos == "l") {
if (getNowLeft == 0) return;
needMoveLeft = getNowLeft + MoveByBtn.moveWidth;
}
MoveByBtn.moveBoxJq.stop(false, true).animate({ left: needMoveLeft + "px" }, 500, "easeOutQuint", function () { });
},
//根据movePos（移动方向）控制图片滚动切换的方向，并触发图片被选中的效果和点击选中图片的操作 l=left r=right
DoItemSelect: function (movePos) {
var nowSelJq = $(MoveByBtn.Options.moveBoxItemsDom + "[NowSelect='1']");
if (!nowSelJq[0]) return;
var getSelNum = MoveByBtn.moveBoxItemJqs.index(nowSelJq);
var needSelNum = 0;
if (movePos == "l") {
needSelNum = getSelNum - 1;
} else if (movePos == "r") {
needSelNum = getSelNum + 1;
}
//选中效果
if (MoveByBtn.DoSelectEff(needSelNum)) {
//选中后调用点击操作
MoveByBtn.DoItemClick(MoveByBtn.moveBoxItemJqs.eq(needSelNum)[0]);
}
return;
},
//被选中的效果
DoSelectEff: function (needSelNum) {
if (needSelNum >= MoveByBtn.moveItemLength || needSelNum < 0) return false;//如果被选中的 位置数不存在就直接跳出
MoveByBtn.selectItemsJq.filter("." + MoveByBtn.Options.selectClass).removeClass(MoveByBtn.Options.selectClass);
var selItemJq = MoveByBtn.selectItemsJq.eq(needSelNum);
if (!selItemJq[0]) return false;
MoveByBtn.moveBoxItemJqs.attr({ "NowSelect": "2" });
MoveByBtn.moveBoxItemJqs.eq(needSelNum).attr({ "NowSelect": "1" });
MoveByBtn.selectItemsJq.eq(needSelNum).addClass(MoveByBtn.Options.selectClass);
return true;
},
//点击操作，（添加选中的效果，并判断是否触发外部传入的点击操作，这个操作在所有操作之后）
DoItemClick: function (moveItemDom) {
var getIndex = MoveByBtn.moveBoxItemJqs.index(moveItemDom);//被选中的位置
if (getIndex >= MoveByBtn.moveItemLength || getIndex < 0) return;//如果被选中的 位置数不存在就直接跳出
MoveByBtn.DoSelectEff(getIndex);
//用户配置了 Options 的点击操作的配置就执行
if (MoveByBtn.Options.clickDoFn) MoveByBtn.Options.clickDoFn(moveItemDom);
},
//根据dom位置，绑定这个元素为初始化选中，并显示在第一个，
BindMoveItem: function (bingItemDom) {
if (!$(bingItemDom)[0]) return;
var getNum = MoveByBtn.moveBoxItemJqs.index($(bingItemDom));//元素在集合中所对应的位置数
var needMoveLeft = getNum * MoveByBtn.moveWidth * (-1);
var getRestrictWidth = MoveByBtn.moveBoxItemJqs.length * MoveByBtn.moveWidth - MoveByBtn.moveRangeBoxJq.width();
MoveByBtn.DoItemClick(bingItemDom);
MoveByBtn.DoSelectEff(getNum);
if (needMoveLeft * -1 > getRestrictWidth) { MoveByBtn.moveBoxJq.css({ left: getRestrictWidth * (-1) + "px" }); return; }
MoveByBtn.moveBoxJq.css({ left: needMoveLeft + "px" });
}
};
//初始化
MoveByBtn.DoIni({
moveBoxDom: "#MoveBox", moveBoxItemsDom: "#MoveBox ul li", moveRangeBoxDom: "#RangeBox", selectItemsDom: "#MoveBox ul li", selectClass: "on", clickDoFn: function (moveItemDom) {
BindSelBigPic(moveItemDom);
return false;
}
}); //点击操作，拓展
function BindSelBigPic(moveItemDom) {
$("#MoveBox ul li span").hide();
$(moveItemDom).find("span").show();
}
//初始化绑定选中位置，（移动上去，并选中）
MoveByBtn.BindMoveItem($("#MoveBox ul li")[2]);
//MoveByBtn.BindMoveItem($("#MoveBox ul li")[7]);
</script>
</body>
</html>
JQ封装切换滚动功能的更多相关文章
- jq封装-无缝滚动效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 怎么用jq封装插件
怎么用jq封装插件 以隔行变色为例 实现原理:1.找到表格的奇偶行,然后添加不同的class,激活行高亮显示也很简单,只要判断mouseover事件,然后添加一个class,mouseout的时候,再 ...
- jq封装选项卡写法
jq普通选项卡写法: var tabTag=$('#tabon'); var tabon=tabTag.find('li');//菜单栏 var tabCon=$(".hidden" ...
- jquery 回车切换 tab功能
挺有趣的,Jquery 回车切换tab功能的实现哦 <html> <head><!--jquery库.js--></head> <body> ...
- jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动
jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 http://www.17sucai.com/pins/demoshow/382
- Android应用切换皮肤功能实现(二)
原文地址http://www.apkbus.com/forum.php?mod=viewthread&tid=149034&highlight=%E7%9A%AE%E8%82%A4 上 ...
- CI框架主题切换的功能
CI框架主题切换的功能 本人接触到这个框架不就,属于菜鸟 , 公司现在用CI框架做项目 ,老大要做一个主题切换的功能,说明功能的要求我的脑子里瞬间有几个想法. 脑子里最简单的就是设置全局变量 如 : ...
- UE4笔记：利用Widget设计一个切换材质功能
UE4引擎中的Widget蓝图是一个重要的工具,可用于场景中的页面叠加,镜头绑定,场景切换等多处地方,在这里笔者介绍一种利用控件蓝图和场景中物体进行信息交互的方法,直观的体现就是进行物体的材质切换. ...
- 基于jQ+CSS3页面滚动内容元素动画特效
今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...
随机推荐
- iOS开发：创建真机调试证书
关于苹果iOS开发,笔者也是从小白过来的,经历过各种困难和坑,其中就有关于开发证书,生产证书,in_house证书,add_Hoc证书申请过程中的问题,以及上架发布问题.今天就着重说一下关于针对于苹果 ...
- Fast特征检测
一.Fast算法 1.基本原理 Fast特征点检测feature2D原理是在圆周上按顺时针方向从1到16的顺序对圆周像素点进行编号.如果在圆周上有N个连续的像素的亮度都比圆心像素的亮度Ip加上阈值t还 ...
- WindDbug应用
Windbg是windows平台上的一款相当强大的调试工具,可以从msdn网站下载得到,最新版本包含在windows sdk中,默认会被安装在C:\Program Files\Debugging To ...
- libpcre.so.1 cannot be found
安装完Nginx之后,启动报错. [vagrant@localhost sbin]$ sudo ./nginx ./nginx: error while loading shared librarie ...
- HDU 4849-Wow! Such City!（最短路）
Wow! Such City! Time Limit: 15000/8000 MS (Java/Others) Memory Limit: 102400/102400 K (Java/Other ...
- 【转】Sqlserver通过链接服务器访问Oracle的那些事儿！
原文:http://blog.sina.com.cn/s/blog_614b6f210100t80r.html 前言:1.不经历风雨,怎能见彩虹.2.充分利用BaiDu.google等搜索引擎查找资料 ...
- iOS开发多线程篇---atomic nonatomic区别
摘要 atomic和nonatomic区别用来决定编译器生成的getter和setter是否为原子操 作.atomic提供多线程安全,是描述该变量是否支持多线程的同步访问,如果选择了atomic 那么 ...
- Jmail的邮件发送
下载注册dll文件 1. dll文件下载 2.到jmail.dll所在目录,运行cmd regsvr32 目录/jmail.dll 3.c#程序中,行首引用代码 using jmail C#示例代码 ...
- 机器学习算法-K-means聚类
引文: k均值算法是一种聚类算法.所谓聚类.他是一种无监督学习,将类似的对象归到同一个蔟中.蔟内的对象越类似,聚类的效果越好. 聚类和分类最大的不同在于.分类的目标事先已知.而聚类则不一样. 由于其产 ...
- mysqld with valgrind
使用编译脚本编译MariaDB 现在进入源代码目录并执行符合你的配置的编译脚本,比如: cd $maria-source-dir # ex: ~/repos/maria/trunk BUILD/com ...