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>