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>
