`

鼠标拖动表格 -- 滚动条

阅读更多
<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>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	  </tr>
	  <tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	  </tr>
	  <tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	  </tr>
	  <tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	  </tr>
	  <tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	  </tr>
	</table>

	</div>
</body>
</html>

 效果总感觉有点点不对劲,希望能得到高人指点。感觉拖动效果没那么理想。

分享到:
评论

相关推荐

    易语言模拟Excel表格的鼠标移动效果

    易语言模拟Excel表格的鼠标移动效果源码,模拟Excel表格的鼠标移动效果,表头刷新,区域显色,取行列号,取滚动条位置

    基于QT中的QTableView实现表格翻页标签(精准定位、表格可拖动大小、可与滑动条联动)

    基于QT中的QTableView实现表格翻页标签(精准定位、表格可拖动大小、可与滑动条联动)

    修改tablewidget的scroll宽度

    成功解决ARM下qt4.7,tablewidget的scroll的宽度设置问题

    易语言程序免安装版下载

    修改高级表格支持库在表格空白处(所有单元格之外)单击鼠标导致当前光标处单元格自动进入编辑状态的BUG。 14. 修改扩展界面支持库一,为“超级列表框”增加“检查框状态被改变”事件。 15. 修改扩展界面支持库一...

    按键精灵 v2014.05.16868官方版.zip

    |-- 解决 脚本源文件视图下的万行脚本输入和移动滚动条效率 |-- 解决 UserVar用户自定义变量的DropList命令不正常问题 |-- 解决 修改录制启动热键后,气泡提示描述不正确问题 |-- 解决 添加到附件中的原始文件被...

    《程序天下:JavaScript实例自学手册》光盘源码

    21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用:AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效(二) 22.3 评星效果 22.4 输入框自动完成功能 22.5 Ajax效果的字符串过滤 ...

    程序天下:JavaScript实例自学手册

    21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用:AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效(二) 22.3 评星效果 22.4 输入框自动完成功能 22.5 Ajax效果的字符串过滤 ...

    非常好的js代码

    控制横向和纵向滚动条的显隐?&lt;body style=”overflow-y:hidden”&gt; 去掉x轴&lt;body style=”overflow-x:hidden”&gt; 去掉y轴&lt;body scroll=”no”&gt;不显 表格变色”style=”CURSOR:&gt; 禁止复制,鼠标...

    计算机应用基础(Windows7+Office2010)第4章Excel-2010的应用.pptx

    滚动条 8.标签栏 9.状态栏 计算机应用基础(Windows7+Office2010)第4章Excel-2010的应用全文共46页,当前为第7页。 4.1.3 Excel 2010的基本概念 1.工作簿 2.工作表 3.单元格 相对地址 A1 绝对地址 $A$1 混合地址...

    javascript网页特效实例大全

    5.15 跟随鼠标的滚动字幕 116 5.16 鼠标悬停打开新的页面 117 5.17 鼠标的指针踪迹效果 118 5.18 跟随鼠标跳动的星星 119 5.19 冒水泡的鼠标 121 5.20 跟随鼠标的幻影文字 123 5.21 非图片鼠标跟踪 124 5.22 ...

    JavaScript网页特效范例宝典源码

    实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...

    《精通CSS+DIV网页样式与布局》光盘源码

     7.3 页面滚动条   第8章 用CSS制作实用的菜单   8.1 项目列表   8.2 无需表格的菜单   8.3 菜单的横竖转换   8.4 菜单实例一:百度导航条   8.5 菜单实例二:流行的Tab菜单   第9章 CSS滤镜...

    精通CSS.DIV.网页样式与布局 源码

     7.3 页面滚动条   第8章 用CSS制作实用的菜单   8.1 项目列表   8.2 无需表格的菜单   8.3 菜单的横竖转换   8.4 菜单实例一:百度导航条   8.5 菜单实例二:流行的Tab菜单   第9章 ...

    精通CSS+DIV网页样式与布局Part1

     7.3 页面滚动条   第8章 用CSS制作实用的菜单   8.1 项目列表   8.2 无需表格的菜单   8.3 菜单的横竖转换   8.4 菜单实例一:百度导航条   8.5 菜单实例二:流行的Tab菜单   第9章 CSS滤镜...

    精通CSS+DIV网页样式与布局

     7.3 页面滚动条   第8章 用CSS制作实用的菜单   8.1 项目列表   8.2 无需表格的菜单   8.3 菜单的横竖转换   8.4 菜单实例一:百度导航条   8.5 菜单实例二:流行的Tab菜单   第9章 CSS滤镜...

    精通CSS.DIV网页样式与布局视频01

     7.3 页面滚动条   第8章 用CSS制作实用的菜单   8.1 项目列表   8.2 无需表格的菜单   8.3 菜单的横竖转换   8.4 菜单实例一:百度导航条   8.5 菜单实例二:流行的Tab菜单   第9章 CSS滤镜...

    易利项目管理软件2013免费体验版(双代号网络图)

    改进横道图任务移动纵向鼠标拖动功能 6-26 横道图支持打印智能分页,每页都可以显示标题、表格标题、日历、备注。 6-19 更新修改任务完成时间造成任务开始/完成时间会多1天的问题。多谢用户反馈 11-27 改进...

    JavaScript实用范例词典04-14

    5.25 让滚动条在窗口左边出现... 128 5.26 改变窗口滚动条的样式... 129 5.27 不能最小化的窗口... 130 5.28 改变在浏览器地址栏中显示的 图标... 131 5.29 弹出一个新窗口... 131 5.30 弹出一个无属性栏的...

    精通CSS+DIV网页样式与布局视频教材

    7.3 页面滚动条 第8章 用CSS制作实用的菜单 8.1 项目列表 8.1.1 列表的符号 8.1.2 图片符号 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一:百度导航条 8.5 菜单实例二:流行的...

    60个超实用JavaScript网页特效收集(珍藏版)

    鼠标滑过才出现的工具条,自动二级菜单 无色,淘宝商品展示橱窗,美化列表,公告滚动文字,简体字繁体字转换,锁定列表,荧光效果,信息滚动,用层模拟可移动的小窗口,自动获得文件名,图片透明渐变做的表格,来访...

Global site tag (gtag.js) - Google Analytics