我现在做好了一个浮动层 代码功能也都能实现 但是用鼠标拖动这个层的时候 鼠标不能拖动过快 确切的说鼠标必须缓慢移动
这个层才能跟随的上 这是什么原因呢?
局部代码奉上
var bodyTop = 0;
var bodyLeft = 0;
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;
$("#TB_ajaxWindowTitle").mousedown(
function() {
var evt = getEvent();
moveable = true;
moveX = evt.clientX;
moveY = evt.clientY;
$(window).scroll(function() { // 页面发生scroll事件时触发
if (typeof window.pageYOffset != 'undefined') {
bodyTop = window.pageYOffset;
bodyLeft = window.pageXOffset
} else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
bodyTop = document.documentElement.scrollTop;
bodyLeft = document.documentElement.scrollLeft;
}
else if (typeof document.body != 'undefined') {
bodyTop = document.body.scrollTop;
bodyLeft = document.body.scrollLeft;
}
});
var offset = $("#TB_window").offset();
moveLeft = parseInt(offset.left) + parseInt($("#TB_window").width())/2 - bodyLeft;
moveTop = parseInt(offset.top) + parseInt($("#TB_window").height())/2 - bodyTop; document.onmousemove = function() {
if (moveable) {
var evt = getEvent();
var x = moveLeft + evt.clientX - moveX;
var y = moveTop + evt.clientY - moveY; $("#TB_window").css("left",x + "px");
$("#TB_window").css("top",y + "px");
}
document.onmouseup = function () {
document.onmousemove=null;
}
}
})
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}----------------------
ps:这个是我根据thickbox修改的
TB_ajaxWindowTitle 是移动窗口的标题容器 TB_window 是这个窗口
这个层才能跟随的上 这是什么原因呢?
局部代码奉上
var bodyTop = 0;
var bodyLeft = 0;
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;
$("#TB_ajaxWindowTitle").mousedown(
function() {
var evt = getEvent();
moveable = true;
moveX = evt.clientX;
moveY = evt.clientY;
$(window).scroll(function() { // 页面发生scroll事件时触发
if (typeof window.pageYOffset != 'undefined') {
bodyTop = window.pageYOffset;
bodyLeft = window.pageXOffset
} else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
bodyTop = document.documentElement.scrollTop;
bodyLeft = document.documentElement.scrollLeft;
}
else if (typeof document.body != 'undefined') {
bodyTop = document.body.scrollTop;
bodyLeft = document.body.scrollLeft;
}
});
var offset = $("#TB_window").offset();
moveLeft = parseInt(offset.left) + parseInt($("#TB_window").width())/2 - bodyLeft;
moveTop = parseInt(offset.top) + parseInt($("#TB_window").height())/2 - bodyTop; document.onmousemove = function() {
if (moveable) {
var evt = getEvent();
var x = moveLeft + evt.clientX - moveX;
var y = moveTop + evt.clientY - moveY; $("#TB_window").css("left",x + "px");
$("#TB_window").css("top",y + "px");
}
document.onmouseup = function () {
document.onmousemove=null;
}
}
})
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}----------------------
ps:这个是我根据thickbox修改的
TB_ajaxWindowTitle 是移动窗口的标题容器 TB_window 是这个窗口
解决方案 »
- 图像覆盖绘制的问题
- jquery怎样选择当前行的下一行
- 使用jquery easyUI1.2.3中的tree时遇到的数据加载的奇怪问题
- 一个让人崩溃的超链接
- javascript的function对象
- 如何引入jqgrid
- 在模式对话框中写树的问题
- 调用服务的时候?ajax=true&json=true&_=1385032521091这些代码,怎么才能不让加这段代码。
- 我利用下面的代码限制上传文件大小,总出现例外,怎么排除这样的错误?
- 我是一个新手,请大家指教。下面是别人写的一段代码,我不明白为什么参数要写成"+x+"、"+i+",真的很迷惑。
- JS多页连续打印,着急中…………
- ext 重加載表頭問題和添加一行問題(問很多論壇都沒解決,來個高手吧)
$(window).scroll(function() 这个是让网页移动的时候 取得滚动距离 可以让层跟随移动
parseInt($("#TB_window").width())/2 之所以要除以2是因为css把这个层的定位是用百分比定位 做了left跟top都是50%的定位 至于其他的就应该没什么了 在线等待!
这个是用jquery做的 我对比了其他的用js做的 基本没什么区别啊 其他的例子上用鼠标拖拽的效果很好 你就是拖的在快 这个层跟随的几乎是跟鼠标一样的速度 还请各位高手指点一下!
LZ看看...
http://cb1156.yakkel.com/jscript/d.html