带可拖拽效果的数字选项卡 

  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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <link rel="stylesheet" href="http://i.tq121.com.cn/c/core.css" />
  7 <style type="text/css">
  8 .nav{ position:relative; margin: 40px;}
  9 .nav ul{ background: #e8e8e8; cursor: pointer; height: 36px; position: absolute; left: 0; top: 0;}
 10 .nav ul li{border-right: 1px solid #ddd; height: 36px; line-height: 36px; width: 36px; float: left; text-align: right; padding-right: 10px; color: #999;}
 11 .nav .cover{ width: 471px; height: 36px;}
 12 .nav .cover ul{ z-index: 1; width: 470px; background: #43BFE3; overflow: hidden;}
 13 .nav .cover ul li{ color: #fff; border-right: 1px solid #2dacd1;padding-left: 10px;padding-right: 0px; text-align: left;}
 14 .nav .coverBox{ cursor: grabbing; background: #2dacd1 ; width: 11px; height: 26px; padding: 14px 0 0 5px; position: absolute; top: -2px;z-index: 3; left: 0;}
 15 .nav .coverBox i{ float: left; height: 12px; display:inline; margin-right: 2px; width: 2px; background: #68c3de ;}
 16 .nav .coverCon{ overflow: hidden;position: absolute; left: 0; top: 0; height: 36px;}
 17 </style>
 18 </head>
 19 <body>
 20 <div id="nav" class="nav">
 21     <ul class="clearfix">
 22         <li>1</li>
 23         <li>2</li>
 24         <li>3</li>
 25         <li>4</li>
 26         <li>5</li>
 27         <li>6</li>
 28         <li>7</li>
 29         <li>8</li>
 30         <li>9</li>
 31         <li>10</li>
 32     </ul>
 33     <div id="cover" class="cover">
 34         <div id="coverBox" class="coverBox">
 35             <i></i><i></i>
 36         </div>
 37         <div id="coverCon" class="coverCon">
 38             <ul class="clearfix">
 39                 <li>1</li>
 40                 <li>2</li>
 41                 <li>3</li>
 42                 <li>4</li>
 43                 <li>5</li>
 44                 <li>6</li>
 45                 <li>7</li>
 46                 <li>8</li>
 47                 <li>9</li>
 48                 <li>10</li>
 49             </ul>    
 50         </div>
 51                     
 52     </div>
 53 </div>
 54 <script type="text/javascript" src="http://i.tq121.com.cn/j/jquery-1.8.2.js"></script>
 55 <script type="text/javascript">
 56 var my = {
 57     wid:'470',
 58     $coverCon:null,
 59     
 60     _popDragEvent:function(elementToDrag,event){
 61         function getScrollOffsets(w) {
 62             w = w || window;
 63             if (w.pageXOffset != null) return {x: w.pageXOffset, y:w.pageYOffset};
 64             var d = w.document;
 65             if (document.compatMode == "CSS1Compat")
 66                 return {x:d.documentElement.scrollLeft, y:d.documentElement.scrollTop};
 67             return { x: d.body.scrollLeft, y: d.body.scrollTop };
 68         }
 69         var scroll = getScrollOffsets();  // A utility function from elsewhere
 70         var startX = event.clientX + scroll.x;
 71         var origX = elementToDrag.offsetLeft;
 72         var deltaX = startX - origX;
 73         if (document.addEventListener) {  // Standard event model
 74             document.addEventListener("mousemove", moveHandler, true);
 75             document.addEventListener("mouseup", upHandler, true);
 76         }
 77         else if (document.attachEvent) {  // IE Event Model for IE5-8
 78             elementToDrag.setCapture();
 79             elementToDrag.attachEvent("onmousemove", moveHandler);
 80             elementToDrag.attachEvent("onmouseup", upHandler);
 81             elementToDrag.attachEvent("onlosecapture", upHandler);
 82         }
 83         if (event.stopPropagation) event.stopPropagation();  // Standard model
 84         else event.cancelBubble = true;                      // IE
 85         if (event.preventDefault) event.preventDefault();   // Standard model
 86         else event.returnValue = false; // IE
 87         var cWidth = this.wid;
 88         var _this = this;
 89         function moveHandler(e) {
 90             if (!e) e = window.event;  // IE event Model
 91             var scroll = getScrollOffsets();
 92             var pLeft = e.clientX + scroll.x - deltaX;
 93             if(pLeft<0){
 94                 elementToDrag.style.left =  0 + "px";
 95                 _this.$coverCon.width(0)
 96             }else if(pLeft>cWidth ){ 
 97                 elementToDrag.style.left = cWidth + "px";
 98                 _this.$coverCon.width(cWidth)
 99             }else{
100                 elementToDrag.style.left = pLeft + "px";
101                 _this.$coverCon.width(pLeft)
102             }
103             if (e.stopPropagation) e.stopPropagation();  // Standard
104             else e.cancelBubble = true;                  // IE
105         }
106         function upHandler(e) {
107             if (!e) e = window.event;  // IE Event Model
108             if (document.removeEventListener) {  // DOM event model
109                 document.removeEventListener("mouseup", upHandler, true);
110                 document.removeEventListener("mousemove", moveHandler, true);
111             }
112             else if (document.detachEvent) {  // IE 5+ Event Model
113                 elementToDrag.detachEvent("onlosecapture", upHandler);
114                 elementToDrag.detachEvent("onmouseup", upHandler);
115                 elementToDrag.detachEvent("onmousemove", moveHandler);
116                 elementToDrag.releaseCapture();
117             }
118             if (e.stopPropagation) e.stopPropagation();  // Standard model
119             else e.cancelBubble = true;                  // IE
120         }
121     },
122     $coverBox:null,
123     init:function(){
124         var _this = this;
125         _this.$coverCon = $('#coverCon');
126         _this.$coverBox = $('#coverBox');
127         _this.wid = '470';
128         _this.$coverBox.mousedown(function(e){
129             _this._popDragEvent($(this)[0],e);
130         });
131 
132         $('#nav ul li').click(function(){
133             var index = $(this).index()+1;
134             var liWid = $(this).outerWidth();
135             console.log(index,liWid)
136 
137             _this.$coverCon.stop(true,true).animate({'width':index*liWid});
138             _this.$coverBox.stop(true,true).animate({'left':index*liWid});
139 
140         })
141     }
142 }
143 my.init()
144 </script>
145 </body>
146 </html>

 

posted @ 2015-08-04 16:36  刘金宇  阅读(185)  评论(0)    收藏  举报