js 模拟 滚动条
来源：互联网 发布：上海盘石软件好吗 编辑：程序博客网 时间：2024/04/28 22:56
<html>
<head>
<title>测试鼠标拖动效果</title>
</head>
<body>
<style>
*{margin:0;padding:0}
.newbar{width:15px;position:absolute;bottom:0;left:0;z-index:10;border:1px solid #03F; height:30px; background:#00F; z-index:3;border:1px solid #F00; }
#user{}
</style>
<div style="border:1px solid #00F; width:800px; height:300px; clear:both; position:relative; overflow:hidden;">zxczxc
<div id="user"><table border="1" >
<tr>
<td width="175">1<a title="宋佳家长" href="/space/451467" target="_blank"><img title="宋佳家长" src="http://fwimg.jstedu.com/cms/files/c1_4f1a217eb2c26c37d2ffc96d.jpg" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c1_4f1a217eb2c26c37d2ffc96d.jpg"></a></td>
<td width="175"><a title="曹萱溢妈妈" href="/space/1276763" target="_blank"><img title="曹萱溢妈妈" src="http://fwimg.jstedu.com/cms/files/c2_4eb124bae4b0dfb34dc64ddf.JPG" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c2_4eb124bae4b0dfb34dc64ddf.JPG"></a></td>
<td width="175"><a title="陆雅如家长" href="/space/835522" target="_blank"><img title="陆雅如家长" src="http://fwimg.jstedu.com/cms/files/c2_4e9bb0cce4b0b185d68eb20c.jpg" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c2_4e9bb0cce4b0b185d68eb20c.jpg"></a></td>
<td width="175"><A title="张凡杨家长" href="/space/1572930" target="_blank"><IMG title="张凡杨家长" src="http://fwimg.jstedu.com/cms/files/c1_4ec8f6abe4b055b6f97d6a68.jpg" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c1_4ec8f6abe4b055b6f97d6a68.jpg"></A></td>
<td width="175"><a title="宋佳家长" href="/space/451467" target="_blank"><img title="宋佳家长" src="http://fwimg.jstedu.com/cms/files/c1_4f1a217eb2c26c37d2ffc96d.jpg" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c1_4f1a217eb2c26c37d2ffc96d.jpg"></a></td>
<td width="175"><a title="曹萱溢妈妈" href="/space/1276763" target="_blank"><img title="曹萱溢妈妈" src="http://fwimg.jstedu.com/cms/files/c2_4eb124bae4b0dfb34dc64ddf.JPG" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c2_4eb124bae4b0dfb34dc64ddf.JPG"></a></td>
<td width="175"><a title="陆雅如家长" href="/space/835522" target="_blank"><img title="陆雅如家长" src="http://fwimg.jstedu.com/cms/files/c2_4e9bb0cce4b0b185d68eb20c.jpg" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c2_4e9bb0cce4b0b185d68eb20c.jpg"></a></td>
<td width="185"><A title="张凡杨家长" href="/space/1572930" target="_blank"><IMG title="张凡杨家长" src="http://fwimg.jstedu.com/cms/files/c1_4ec8f6abe4b055b6f97d6a68.jpg" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c1_4ec8f6abe4b055b6f97d6a68.jpg"></A></td>
<td><a title="陆雅如家长" href="/space/835522" target="_blank"><img title="陆雅如家长" src="http://fwimg.jstedu.com/cms/files/c2_4e9bb0cce4b0b185d68eb20c.jpg" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c2_4e9bb0cce4b0b185d68eb20c.jpg"></a></td>
<td><A title="张凡杨家长" href="/space/1572930" target="_blank"><IMG title="张凡杨家长" src="http://fwimg.jstedu.com/cms/files/c1_4ec8f6abe4b055b6f97d6a68.jpg" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c1_4ec8f6abe4b055b6f97d6a68.jpg"></A></td>
<td width="175"><a title="宋佳家长" href="/space/451467" target="_blank"><img title="宋佳家长" src="http://fwimg.jstedu.com/cms/files/c1_4f1a217eb2c26c37d2ffc96d.jpg" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c1_4f1a217eb2c26c37d2ffc96d.jpg"></a></td>
<td width="175"><a title="曹萱溢妈妈" href="/space/1276763" target="_blank"><img title="曹萱溢妈妈" src="http://fwimg.jstedu.com/cms/files/c2_4eb124bae4b0dfb34dc64ddf.JPG" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c2_4eb124bae4b0dfb34dc64ddf.JPG"></a></td>
<td width="175"><a title="陆雅如家长" href="/space/835522" target="_blank"><img title="陆雅如家长" src="http://fwimg.jstedu.com/cms/files/c2_4e9bb0cce4b0b185d68eb20c.jpg" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c2_4e9bb0cce4b0b185d68eb20c.jpg"></a></td>
<td width="175"><A title="张凡杨家长" href="/space/1572930" target="_blank"><IMG title="张凡杨家长" src="http://fwimg.jstedu.com/cms/files/c1_4ec8f6abe4b055b6f97d6a68.jpg" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c1_4ec8f6abe4b055b6f97d6a68.jpg"></A></td>
<td width="175"><a title="宋佳家长" href="/space/451467" target="_blank"><img title="宋佳家长" src="http://fwimg.jstedu.com/cms/files/c1_4f1a217eb2c26c37d2ffc96d.jpg" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c1_4f1a217eb2c26c37d2ffc96d.jpg"></a></td>
<td width="175"><a title="曹萱溢妈妈" href="/space/1276763" target="_blank"><img title="曹萱溢妈妈" src="http://fwimg.jstedu.com/cms/files/c2_4eb124bae4b0dfb34dc64ddf.JPG" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c2_4eb124bae4b0dfb34dc64ddf.JPG"></a></td>
<td width="175"><a title="陆雅如家长" href="/space/835522" target="_blank"><img title="陆雅如家长" src="http://fwimg.jstedu.com/cms/files/c2_4e9bb0cce4b0b185d68eb20c.jpg" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c2_4e9bb0cce4b0b185d68eb20c.jpg"></a></td>
<td width="185"><A title="张凡杨家长" href="/space/1572930" target="_blank"><IMG title="张凡杨家长" src="http://fwimg.jstedu.com/cms/files/c1_4ec8f6abe4b055b6f97d6a68.jpg" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c1_4ec8f6abe4b055b6f97d6a68.jpg"></A></td>
<td><a title="陆雅如家长" href="/space/835522" target="_blank"><img title="陆雅如家长" src="http://fwimg.jstedu.com/cms/files/c2_4e9bb0cce4b0b185d68eb20c.jpg" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c2_4e9bb0cce4b0b185d68eb20c.jpg"></a></td>
<td><A title="张凡杨家长" href="/space/1572930" target="_blank"><IMG title="张凡杨家长" src="http://fwimg.jstedu.com/cms/files/c1_4ec8f6abe4b055b6f97d6a68.jpg" width="80" height="80" _src="http://fwimg.jstedu.com/cms/files/c1_4ec8f6abe4b055b6f97d6a68.jpg"></A>d</td>
</tr>
<tr>
<td>d</td>
<td>d</td>
<td>d</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
<div>
<div style="border:1px solid #00F; width:800px; height:50px; clear:both; position:relative; overflow:hidden; margin-left:300">
<div id="j" style="height:10px;background:#ccc;border:1px solid #ccc; position: absolute;bottom:10px;left:0; clear:both;width:0; z-index:2"></div>
<div style="height:10px;background:#fff;border:1px solid #ccc; position: absolute;bottom:10px;left:0; clear:both;width:800px; z-index:1"></div>
<div class="newbar" id="newbar"></div>
</div>
</div>
<script>
//获取DOM 宽
var getDomWH = function(o){
var div = document.createElement('div');
div.style.position ="absolute";
div.style.top = 0;
div.style.left = 0;
div.style.border ="1px solid #ff0000";
var oText=document.createTextNode("hello world!");
div.innerHTML = o.innerHTML;
document.body.appendChild(div);
var width = div.offsetWidth;
div.parentNode.removeChild(div);
return width;
}
function drag(obj){
var o = document.getElementById(obj);
document.getElementById("j").style.width=o.offsetLeft;
o.onmousedown = function(e){
var xo = getDomWH( document.getElementById("user"))-800;
e = e || window.event;
var x = e.layerX || e.offsetX;
var y = e.layerY || e.offsetY;
var xx = e.clientX || e.pageX;
var yy = e.clientY || e.pageY;
var oleft = xx-x-o.offsetLeft+document.body.scrollLeft;
//console.log(xx +"--"+ x+"---"+ o.offsetLeft+"----"+oleft);
if(o.setCapture){
o.setCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d=document;
d.ondragstart = function(){ return false;}//禁止在拖动区域外拖动 主要用于兼容CHROME SAFARI
d.onselectstart = function(){return false}//在拖动时不让网页上的东西被选中有蓝色底 主要用于IE CHROME SAFARI
d.onmousemove=function(e){
//console.log(o.offsetLeft);
e = e || window.event;
var px = e.clientX || e.pageX;
var py = e.clientY || e.pageY;
var tx = px -x-oleft+document.body.scrollLeft;
var ty = py -y;
//console.log(px +"--"+ x+"---"+tx+"--"+ document.body.scrollLeft);
if(tx>=0){
document.getElementById("j").style.width=o.offsetLeft;
o.style.left = tx;
}
else{
o.style.left=0;
document.getElementById("j").style.width=0;
}
if(tx>=783){
document.getElementById("j").style.width=783;
o.style.left = 783;
}
var xoo =Math.ceil(xo*parseInt(o.style.left)/783);
document.getElementById("user").style.marginLeft = -xoo;
//o.style.top = ty;
}
d.onmouseup = function g(e){
if(o.releaseCapture){
o.releaseCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
document.getElementById("j").style.width=o.offsetLeft;
d.onmousemove=null;
d.onmouseup=null;
d.ondragstart=null;
d.onselectstart=null;
}
}
}
window.onload = function(){
drag("newbar");
}
</script>
</body>
</html>
- js 模拟 滚动条
- js模拟滚动条
- div JS模拟滚动条
- JS模拟简易滚动条
- js-模拟垂直滚动条
- js横向模拟滚动条展示特效
- js实现简易模拟滚动条
- 模拟滚动条
- 模拟滚动条
- javascript 模拟滚动条
- javascript 模拟滚动条
- 模拟滚动条
- div模拟滚动条
- 模拟垂直滚动条
- 模拟滚动条
- translate3d模拟滚动条
- js模拟弹性运动+自由落体，拖动滚动条自动下坠
- python selenium，PhantomJS运用 抓取滚动条滚动加载的页面， js动作操作，模拟登陆
- 学习cadence总结——画原理图（建立及显示的几个快捷方式）
- android动画xml文件详细实例说明
- maven-pluginManagement1
- 教你掌握搜索引擎高级指令
- maven-pluginManagement2
- js 模拟 滚动条
- Java 引用 WeakReference
- C#委托之个人理解
- CUDA 3.0 & Visual Studio 2008 安裝 for Win7 32bit/64bit
- 车载网络信号的编码方式
- How To Repair MySQL Replication
- 关于sql常用的上取整下取整等常用函数
- Mootools写的图片滚动切换效果的类
- 【100题】第十六题（层序打印树的节点）
