<html>
<head>
<script src="common/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#bdiv").mousedown(function(e){//鼠标按下绑定鼠标移动事件
var lex = e.pageX;
$("#bdiv").mousemove(function(event){
$(this).scrollLeft($(this).scrollLeft() - (event.pageX - lex));
lex = event.pageX;
});
});
$("#bdiv").mouseup(function(event){//鼠标松开，释放绑定事件
$(this).unbind("mousemove");
});
});
</script>
<style>
html,body { overflow:hidden; height:100%}
.ywzb { width: 100%; border:none; text-align:center; cursor: pointer;}
.ywzb tr td { border: 1px solid #333; border-collapse:collapse; }
.ttl { font-size:14px; font-weight:bold;}
.cttl { font-size:12px;}
.scrol {overflow-x: scroll; width:100%;}
.scrol table {width:2500px;}
.warn { background-color: #FBB; border: 1px solid #333;}
</style>
<title>可鼠标拖动的表格</title></head>
<body>
<div class="scrol" id="bdiv">
<table width="2000" border="1" cellspacing="0" cellpadding="0">
<tr>
<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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<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> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
效果总感觉有点点不对劲，希望能得到高人指点。感觉拖动效果没那么理想。
176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
