JQ封装切换滚动功能
2013-10-31 19:49
232 查看
博客园将不进行维护,转站到我的个人博文:地址
/*---------控制滚动图片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>
相关文章推荐
- js实现相册翻页,滚动,切换,轮播功能
- JQuery插件第三十个 : 图片批量滚动的封装功能增强版
- 使用jq重绘img大小+测试密码的强度+滚动时动态加载页面内容+导航菜单切换
- 功能强大的滚动播放插件JQ-Slide
- ASP常用的几个功能模块封装成函数调用(登录验证,状态切换。。) http://www.tsingfeng.com/archives/?article-89.html
- Webdriver实现对菜单栏的灵活切换功能,附上代码,类似的菜单栏切换可以自己封装
- angular1 + jquery实现仿饿了么滚动切换菜单功能
- jq图片左右无缝切换滚动,有定时切换。
- js实现相册翻页,滚动,切换,轮播功能
- ffmpeg系列:使用C++类封装ffmpeg,封装读取视频帧功能Read()方法
- 基于Flex的裁剪图片功能封装
- AngularJS driective 封装 自动滚动插件
- 【微信公众平台开发】封装获取天气预报功能
- JavaScript实现--中英语言切换功能
- JQ实现图片切换
- ubuntu 点击任务栏软件启动项j激活,切换,最小化功能 像windows一样
- 封装ShareSDK中的分享功能封以及对类似第三方功能封装的心得【原创】
- JQ文字向上滚动
- iOS封装功能生成 .framework
- JavaWEB--POI之EXCEL操作、优化、封装详解系列(四)--PoiExportUtil架构设计篇与功能说明