要是li的个数不确定的情况下.然后移动滚动条到最后,让ul列表也同时在最后.改怎么计算啊?
<!DOCTYPE HTML><html><head><title>soul42</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><STYLE type="text/css"> * { margin:0; padding:0;} body{width:100%;height:100%;} #wrap{width:550px;height:8px;background:#ccc;margin:55px auto;position:relative} #move{position:absolute;top:0;left:0;width:50px;height:8px;background:red;} #list{width:550px;height:100px;overflow:hidden;position:relative;margin:0 auto} #list ul{position:absolute;top:0;left:0;height:100px;} #list ul li{width:100px;margin-right:10px;background:orange;height:100px;float:left;display:inline}</STYLE></head><body><div id="list"> <ul id="ul"> <li>1</li> <li>2</li> <li>3</li> <li></li> <li>4</li> <li>5</li> <li>7</li> <li>4</li> <li>5</li> <li>r32</li> <li>4</li> <li>5</li> <li>9</li> <li>10</li> <li>4</li> <li>5</li> <li>r</li> <li>s</li> <li>5</li> <li>9</li> <li>w</li> </ul></div><div id="wrap"> <div id="move"> </div></div> <script type="text/javascript"> var $ =function(id){return document.getElementById(id)} var list = $("ul").getElementsByTagName("li"); $("ul").style.width = ((list[0].offsetWidth+10)*list.length) +"px"; var div = $("move"); var i=0; div.onmousedown =function(e){ var posX = e.clientX-this.offsetLeft; document.onmousemove =function(e){ var x = e.clientX - posX; div.style.left = x+"px"; $("ul").style.left = parseInt("-"+(x*2)) +"px"; console.log(x) if(div.offsetLeft <0 ){ div.style.left ="0px"; } if(div.offsetLeft > ($("wrap").offsetWidth -div.offsetWidth)){ div.style.left = ($("wrap").offsetWidth-div.offsetWidth) +"px"; } } document.onmouseup =function(){ document.onmousemove =null; } } </script></body></html>
添加回答
举报
0/150
提交
取消