zoukankan      html  css  js  c++  java
  • JQ封装切换滚动功能

     博客园将不进行维护,转站到我的个人博文:地址


    /*---------控制滚动图片v1(作者:SFLYQ)-----------
    Options 配置对象,(用来配置控制元素的dom位置,初始化一些必要的对象或者方法)
    DoIni 初始化操作(初始化元素的jq对象,以及事件绑定等)
    DoMove 控制图片现在模块的移动(控制的方向又用户传入)
    BindMoveItem根据dom位置,绑定这个元素为初始化选中,并显示在第一个,
    */
    效果地址:http://pro9505d48a.isitestar.cn/

    代码下载地址:https://github.com/SFLAQiu/SFLAQiu.JQPack.ControlMoveDiv/

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2 <html xmlns="http://www.w3.org/1999/xhtml">
      3 <head>
      4     <title></title>
      5 <link href="Style/Default.css" type="text/css" rel="stylesheet"/>
      6 <style  type="text/css">
      7     .iconLeft{float:left; display:block; border:1px solid green; height:150px; width:50px;}/*左边按钮*/
      8     .iconRight { float:left;display:block; border:1px solid green; height:150px; width:50px;}/*右边按钮*/
      9     .picList{float:left;  position: absolute; width:800px; left:0px; }/*移动模块*/
     10     .picList li{float:left; border:1px solid red; border:1px solid red; height:150px; width:200px;list-style:none; }/*移动项*/
     11     .picWrap{ float:left; overflow:hidden; height:150px; width:800px; border:1px solid blue;}/*移动范围模块*/
     12     /*效果*/
     13     .on{ background-color:#808080;}/*选中效果*/
     14 </style> 
     15 
     16 </head>
     17 <body>
     18     <div>
     19        <a class="iconLeft" href="javascript:;"  onclick="MoveByBtn.DoMove('l');return false;"><</a>
     20             <div id="RangeBox"  style="position: relative;" class="picWrap">
     21                 <div id="MoveBox"  class="picList">
     22                     <ul>
     23                         <li>111111<span style="display:none;color:red;"></span></li>
     24                         <li>222222<span style="display:none;color:red;"></span></li>
     25                         <li>333333<span style="display:none;color:red;"></span></li>
     26                         <li>4444444<span style="display:none;color:red;"></span></li>
     27                         <li>5555<span style="display:none;color:red;"></span></li>
     28                         <li>666<span style="display:none;color:red;"></span></li>
     29                         <li>77<span style="display:none;color:red;"></span></li>
     30                         <li>8<span style="display:none;color:red;"></span></li>
     31                         <li>9<span style="display:none;color:red;"></span></li>
     32                         <li>10<span style="display:none;color:red;"></span></li>
     33                         <li>11<span style="display:none;color:red;"></span></li>
     34                         <li>12<span style="display:none;color:red;"></span></li>
     35                     </ul>
     36                 </div>
     37             </div>
     38         <a class="iconRight" href="javascript:;"  onclick="MoveByBtn.DoMove('r');return false;">></a>     
     39     </div>
     40     
     41 
     42 
     43 
     44 
     45 <script src="JS/jquery.1.9.1.min.js" type="text/javascript" ></script>
     46 <script src="JS/jquery.easing.min.js" type="text/javascript" ></script>
     47 <script type="text/javascript" >
     48 /*---------控制滚动图片v1(作者:SFLYQ)-----------
     49 Options 配置对象,(用来配置控制元素的dom位置,初始化一些必要的对象或者方法)
     50 DoIni 初始化操作(初始化元素的jq对象,以及事件绑定等)
     51 DoMove 控制图片现在模块的移动(控制的方向又用户传入)
     52 BindMoveItem根据dom位置,绑定这个元素为初始化选中,并显示在第一个,
     53 */
     54 var MoveByBtn = {};
     55 MoveByBtn = {
     56     Options: {
     57         moveBoxDom: "#MoveBox",//移动块html元素的dom位置
     58         moveBoxItemsDom: "#MoveBox ul li",//移动项html元素的dom位置
     59         moveRangeBoxDom: "#RangeBox",//移动范围块html元素的dom位置
     60         selectItemsDom: "#MoveBox ul li",//选中项html元素的dom位置
     61         selectClass: "on",//选中效果类名
     62         clickDoFn: function () { }//点击选中项后操作(在所有操作之后)
     63     },
     64     moveItemLength: 0,//移动项的总个数
     65     moveWidth: 0,//每次移动的长度
     66     moveBoxJq: null,//移动块的JQ对象
     67     moveRangeBoxJq: null,//移动范围块的JQ对象
     68     moveBoxItemJqs: null,//移动项JQ对象集合
     69     selectItemsJq: null,//选中项JQ对象集合
     70     // 初始化操作
     71     DoIni: function (iniObj) {
     72         MoveByBtn.moveBoxJq = $(MoveByBtn.Options.moveBoxDom);
     73         MoveByBtn.moveRangeBoxJq = $(MoveByBtn.Options.moveRangeBoxDom);
     74         MoveByBtn.moveBoxItemJqs = $(MoveByBtn.Options.moveBoxItemsDom);
     75         MoveByBtn.selectItemsJq = $(MoveByBtn.Options.selectItemsDom);
     76 
     77         MoveByBtn.Options = $.extend(MoveByBtn.Options, iniObj);
     78         MoveByBtn.moveWidth = $(MoveByBtn.moveBoxItemJqs[0]).outerWidth(true);
     79         MoveByBtn.moveItemLength = MoveByBtn.moveBoxItemJqs.length;
     80         var getRestrictWidth = MoveByBtn.moveBoxItemJqs.length * MoveByBtn.moveWidth - MoveByBtn.moveRangeBoxJq.width();
     81         //初始化点击
     82         MoveByBtn.moveBoxItemJqs.click(function () {
     83             MoveByBtn.DoItemClick(this);
     84             return false;
     85         });
     86 
     87         //初始化范围这个的宽度
     88         MoveByBtn.moveBoxJq.css({ "width": MoveByBtn.moveItemLength * MoveByBtn.moveWidth + "px" });
     89         MoveByBtn.moveBoxJq.css({ left: "0px", position: "absolute" });
     90     },
     91     //移动操作
     92     DoMove: function (movePos) {
     93         MoveByBtn.moveBoxJq.stop(false, true);
     94         var getNowLeft = parseInt(MoveByBtn.moveBoxJq.css("left"), 10);
     95         var needMoveLeft = 0;
     96         MoveByBtn.DoItemSelect(movePos);
     97         if (movePos == "r") {
     98             needMoveLeft = getNowLeft - MoveByBtn.moveWidth;
     99             var getRestrictWidth = MoveByBtn.moveBoxItemJqs.length * MoveByBtn.moveWidth - MoveByBtn.moveRangeBoxJq.width();
    100             if (needMoveLeft * -1 > getRestrictWidth) return;
    101         } else if (movePos == "l") {
    102             if (getNowLeft == 0) return;
    103             needMoveLeft = getNowLeft + MoveByBtn.moveWidth;
    104         }
    105         MoveByBtn.moveBoxJq.stop(false, true).animate({ left: needMoveLeft + "px" }, 500, "easeOutQuint", function () { });
    106     },
    107     //根据movePos(移动方向)控制图片滚动切换的方向,并触发图片被选中的效果和点击选中图片的操作  l=left r=right
    108     DoItemSelect: function (movePos) {
    109         var nowSelJq = $(MoveByBtn.Options.moveBoxItemsDom + "[NowSelect='1']");
    110         if (!nowSelJq[0]) return;
    111         var getSelNum = MoveByBtn.moveBoxItemJqs.index(nowSelJq);
    112         var needSelNum = 0;
    113         if (movePos == "l") {
    114             needSelNum = getSelNum - 1;
    115         } else if (movePos == "r") {
    116             needSelNum = getSelNum + 1;
    117         }
    118         //选中效果
    119         if (MoveByBtn.DoSelectEff(needSelNum)) {
    120             //选中后调用点击操作
    121             MoveByBtn.DoItemClick(MoveByBtn.moveBoxItemJqs.eq(needSelNum)[0]);
    122         }
    123         return;
    124     },
    125     //被选中的效果
    126     DoSelectEff: function (needSelNum) {
    127         if (needSelNum >= MoveByBtn.moveItemLength || needSelNum < 0) return false;//如果被选中的 位置数不存在就直接跳出
    128         MoveByBtn.selectItemsJq.filter("." + MoveByBtn.Options.selectClass).removeClass(MoveByBtn.Options.selectClass);
    129         var selItemJq = MoveByBtn.selectItemsJq.eq(needSelNum);
    130         if (!selItemJq[0]) return false;
    131         MoveByBtn.moveBoxItemJqs.attr({ "NowSelect": "2" });
    132         MoveByBtn.moveBoxItemJqs.eq(needSelNum).attr({ "NowSelect": "1" });
    133         MoveByBtn.selectItemsJq.eq(needSelNum).addClass(MoveByBtn.Options.selectClass);
    134         return true;
    135     },
    136     //点击操作,(添加选中的效果,并判断是否触发外部传入的点击操作,这个操作在所有操作之后)
    137     DoItemClick: function (moveItemDom) {
    138         var getIndex = MoveByBtn.moveBoxItemJqs.index(moveItemDom);//被选中的位置
    139         if (getIndex >= MoveByBtn.moveItemLength || getIndex < 0) return;//如果被选中的 位置数不存在就直接跳出
    140         MoveByBtn.DoSelectEff(getIndex);
    141         //用户配置了 Options 的点击操作的配置就执行
    142         if (MoveByBtn.Options.clickDoFn) MoveByBtn.Options.clickDoFn(moveItemDom);
    143     },
    144     //根据dom位置,绑定这个元素为初始化选中,并显示在第一个,
    145     BindMoveItem: function (bingItemDom) {
    146         if (!$(bingItemDom)[0]) return;
    147         var getNum = MoveByBtn.moveBoxItemJqs.index($(bingItemDom));//元素在集合中所对应的位置数
    148         var needMoveLeft = getNum * MoveByBtn.moveWidth * (-1);
    149         var getRestrictWidth = MoveByBtn.moveBoxItemJqs.length * MoveByBtn.moveWidth - MoveByBtn.moveRangeBoxJq.width();
    150         MoveByBtn.DoItemClick(bingItemDom);
    151         MoveByBtn.DoSelectEff(getNum);
    152         if (needMoveLeft * -1 > getRestrictWidth) { MoveByBtn.moveBoxJq.css({ left: getRestrictWidth * (-1) + "px" }); return; }
    153         MoveByBtn.moveBoxJq.css({ left: needMoveLeft + "px" });
    154     }
    155 };
    156     //初始化
    157     MoveByBtn.DoIni({
    158         moveBoxDom: "#MoveBox", moveBoxItemsDom: "#MoveBox ul li", moveRangeBoxDom: "#RangeBox", selectItemsDom: "#MoveBox ul li", selectClass: "on", clickDoFn: function (moveItemDom) {
    159             BindSelBigPic(moveItemDom);
    160             return false;
    161         }
    162     });
    163 
    164     //点击操作,拓展
    165     function BindSelBigPic(moveItemDom) {
    166         $("#MoveBox ul li span").hide();
    167         $(moveItemDom).find("span").show();
    168     }
    169      //初始化绑定选中位置,(移动上去,并选中)
    170      MoveByBtn.BindMoveItem($("#MoveBox ul li")[2]);
    171     //MoveByBtn.BindMoveItem($("#MoveBox ul li")[7]);
    172     </script>
    173 </body>
    174 </html>
  • 相关阅读:
    c/c++ 数组的智能指针 使用
    c/c++ 智能指针 weak_ptr 使用
    在ubuntu18.04上安装EOS
    c/c++ 智能指针 unique_ptr 使用
    python基础-内置装饰器classmethod和staticmethod
    java中5种异步转同步方法
    java自定义注解
    多线程之线程池(Thread,Runnable,callable,Future,FutureTask)
    java反射
    重写ThreadFactory方法和拒绝策略
  • 原文地址:https://www.cnblogs.com/SFLYQ/p/3399978.html
Copyright © 2011-2022 走看看