懂jquery或者javascript的进，移动层问题
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery移动层(支持FF)</title>
<style type="text/css">
#movediv
{
position:absolute;
width:300px;
height:150px;
left:80px;
top:20px;
border:1px solid #333333;
background-color:#777788;
text-align:center;
line-height:400%;
font-size:14px;
}
</style>
<script language="JavaScript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(document).ready(function()
{
$("#movediv").click(function()
{
}).mousedown(function(e)
{
_move=true;
_x=e.pageX-parseInt($("#movediv").css("left"));
_y=e.pageY-parseInt($("#movediv").css("top"));
$("#movediv").fadeTo(20, 0.25);//点击后开始拖动并透明显示
});
$(document).mousemove(function(e)
{
if(_move)
{
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
$("#movediv").css({top:y,left:x});//控件新位置
}
}).mouseup(function()
{
_move=false;
$("#movediv").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
});
</script>
</head>
<body>
<div id="movediv">支持鼠标移动层</div>
</body>
</html>
如何控制这个jquery的移动层不让它移到阅览器外，当移动层移动到最外边，就不能在移了，不能让它移出阅览器的最左边，最上边最下边，最左边，而且还要根据页面大小进行限制 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery移动层(支持FF)</title>
<style type="text/css">
#movediv
{
position:absolute;
width:300px;
height:150px;
left:80px;
top:20px;
border:1px solid #333333;
background-color:#777788;
text-align:center;
line-height:400%;
font-size:14px;
}
</style>
<script language="JavaScript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(document).ready(function()
{
$("#movediv").click(function()
{
}).mousedown(function(e)
{
_move=true;
_x=e.pageX-parseInt($("#movediv").css("left"));
_y=e.pageY-parseInt($("#movediv").css("top"));
$("#movediv").fadeTo(20, 0.25);//点击后开始拖动并透明显示
});
$(document).mousemove(function(e)
{
if(_move)
{
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
$("#movediv").css({top:y,left:x});//控件新位置
}
}).mouseup(function()
{
_move=false;
$("#movediv").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
});
</script>
</head>
<body>
<div id="movediv">支持鼠标移动层</div>
</body>
</html>
如何控制这个jquery的移动层不让它移到阅览器外，当移动层移动到最外边，就不能在移了，不能让它移出阅览器的最左边，最上边最下边，最左边，而且还要根据页面大小进行限制 展开
展开全部
/**
* 获得与浏览器窗口的相关信息
* @return {array} [当前窗口宽度，当前窗口高度，当前页面宽度，当前页面高度，横向滚动条位置，竖向滚动条位置]
*/
function getWin() {
var d = $(document);
return [$(window).width(), $(window).height(), d.width(), d.height(), d.scrollLeft(), d.scrollTop()];
}
你要先获取浏览器的相关信息，然后再在mousemove里边作判断：
比如横坐标，不能小于0或者scrollLeft值，不能大于scrollLeft+窗口的宽度-移动层自身的宽度；
纵坐标也以此类推即可；
* 获得与浏览器窗口的相关信息
* @return {array} [当前窗口宽度，当前窗口高度，当前页面宽度，当前页面高度，横向滚动条位置，竖向滚动条位置]
*/
function getWin() {
var d = $(document);
return [$(window).width(), $(window).height(), d.width(), d.height(), d.scrollLeft(), d.scrollTop()];
}
你要先获取浏览器的相关信息，然后再在mousemove里边作判断：
比如横坐标，不能小于0或者scrollLeft值，不能大于scrollLeft+窗口的宽度-移动层自身的宽度；
纵坐标也以此类推即可；
追问
能写得具体点吗？照顾一下我们新手。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
上面的说了。思路就是这样的。move的时候计算安全范围。
第一：最小值 x = y = 0; 所以。x和y不能小于0；
第二：麻烦点，x,y的最大值。计算是这样的。maxX = 可视宽口的宽度 - 拖动对像的绝对宽度，同样，maxY = 可视窗口的高度 - 拖动对像的绝对高度。当然，这个高度是比较复杂的。要考滤scrollTop值。具体自己试试就知道了。
第一：最小值 x = y = 0; 所以。x和y不能小于0；
第二：麻烦点，x,y的最大值。计算是这样的。maxX = 可视宽口的宽度 - 拖动对像的绝对宽度，同样，maxY = 可视窗口的高度 - 拖动对像的绝对高度。当然，这个高度是比较复杂的。要考滤scrollTop值。具体自己试试就知道了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1、获取浏览器可视窗口的宽度和高度
2、获取移动层的宽度和高度
3、获取滚动条滚动的宽度和高度
通过这几项获取上下左右合适的位置
2、获取移动层的宽度和高度
3、获取滚动条滚动的宽度和高度
通过这几项获取上下左右合适的位置
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery移动层(支持FF)</title>
<style type="text/css">
#movediv
{
position:absolute;
width:300px;
height:150px;
left:80px;
top:20px;
border:1px solid #333333;
background-color:#777788;
text-align:center;
line-height:400%;
font-size:14px;
}
</style>
<script language="JavaScript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(document).ready(function()
{
$("#movediv").click(function()
{
}).mousedown(function(e)
{
_move=true;
_x=e.pageX-parseInt($("#movediv").css("left"));
_y=e.pageY-parseInt($("#movediv").css("top"));
$("#movediv").fadeTo(20, 0.25);//点击后开始拖动并透明显示
});
$(document).mousemove(function(e)
{
if(_move)
{
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
if(x>0&&y>0&&x<$(window).width()-300-$(document).scrollLeft()&&y<$(window).height()-150-$(document).scrollTop()){
$("#movediv").css({top:y,left:x});//控件新位置
}
}
}).mouseup(function()
{
_move=false;
$("#movediv").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
});
</script>
</head>
<body>
<div id="movediv">支持鼠标移动层</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery移动层(支持FF)</title>
<style type="text/css">
#movediv
{
position:absolute;
width:300px;
height:150px;
left:80px;
top:20px;
border:1px solid #333333;
background-color:#777788;
text-align:center;
line-height:400%;
font-size:14px;
}
</style>
<script language="JavaScript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(document).ready(function()
{
$("#movediv").click(function()
{
}).mousedown(function(e)
{
_move=true;
_x=e.pageX-parseInt($("#movediv").css("left"));
_y=e.pageY-parseInt($("#movediv").css("top"));
$("#movediv").fadeTo(20, 0.25);//点击后开始拖动并透明显示
});
$(document).mousemove(function(e)
{
if(_move)
{
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
if(x>0&&y>0&&x<$(window).width()-300-$(document).scrollLeft()&&y<$(window).height()-150-$(document).scrollTop()){
$("#movediv").css({top:y,left:x});//控件新位置
}
}
}).mouseup(function()
{
_move=false;
$("#movediv").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
});
</script>
</head>
<body>
<div id="movediv">支持鼠标移动层</div>
</body>
</html>
追问
Y轴和X轴还是有超出，而且拖动的时候经常被卡主，请问这位高手有什么办法可以让它更人性化些吗？
追答
呵呵，我不是什么高手，关于Y轴和X轴还是有超出的问题，感觉在判断的时候多减点就是了，拖动不灵活的问题我真的不是很清楚了，百度了下也没找到方法，不好意思呃。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
