javascript在一定范围内拖动图片的代码 100
一个类似相框的页面，图片放在最下面一层，相框的窗口比图片小点，可以用鼠标左右拖动图片，在相框中显示。问题是，左右拖动的时候，想让他不要在整个浏览器中跑，往左拖到图片右侧完...
一个类似相框的页面，图片放在最下面一层，相框的窗口比图片小点，可以用鼠标左右拖动图片，在相框中显示。
问题是，左右拖动的时候，想让他不要在整个浏览器中跑，往左拖到图片右侧完全露出来就停止，不能再拖；往右拖动的时候，图片左侧完全露出来就好，不能再继续往右拖。
现在，拖动的代码已经写好，怎么使拖动的范围有个限制？
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>随意拖动图片</title>
<style type="text/css">
<!--
#left {
position:absolute;
background-color: #0000FF;
height: 700px;
width: 200px;
left: 0px;
top: 150px;
z-index:5;
}
#right {
background-color: #00CC00;
height: 700px;
width: 200px;
position: absolute;
z-index: 5;
top: 150px;
right: 0px;
}
#top {
background-color: #CCCC00;
height: 150px;
width: 100%;
position: absolute;
z-index: 5;
left: 0px;
top: 0px;
}
-->
</style>
</head>
<script language="javascript" type="text/jscript">
drag = 0;
move = 0;
function mousedown()
{
if(drag)
{
X1 = window.event.x - parseInt(dragimages.style.left);
dragimages.style.Index += 1;
move = 1;
}
}
function mouseStop()
{
window.event.returnValue = false;
}
function mousemove()
{
if (move)
{
dragimages.style.left = window.event.x - X1;
}
}
function mouseup()
{
move = 0;
}
function remove()
{
document.all.div1.onmousemove = mousemove;
document.all.div1.onmousedown = mousedown;
document.all.div1.onmouseup = mouseup;
document.all.div1.ondragstart = mouseStop;
}
/*function bigimg(i)
{
var zoom = parseInt(i.style.zoom,10)||100;
zoom += event.wheelDelta / 12;
if(zoom > 0 )
i.style.zoom=zoom+'%';
return false;
}*/
</script>
<body onload="remove()">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="div1" onmouseover="dragimages=div1;drag=1;"style="height:77px;left:200px;position:absolute;top:150px;width:90px;z-index:1">
<asp:Image ID="Image1" runat="server" ImageUrl="image/MapWenZhou.gif" width="901" height="637" style="cursor:pointer " />
</div>
</body>
</html>
对，如果拖动图片移动的范围没有一个限制的话，相框里面就会出现空白。
我把图片放在div1里面的，写了js
其他的层都是相框的边
http://www.wz121.com/
这个网站中，在城市天气预报之类有地图的页面看看就知道我要的效果了，拖动图片，不露出空白 展开
问题是，左右拖动的时候，想让他不要在整个浏览器中跑，往左拖到图片右侧完全露出来就停止，不能再拖；往右拖动的时候，图片左侧完全露出来就好，不能再继续往右拖。
现在，拖动的代码已经写好，怎么使拖动的范围有个限制？
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>随意拖动图片</title>
<style type="text/css">
<!--
#left {
position:absolute;
background-color: #0000FF;
height: 700px;
width: 200px;
left: 0px;
top: 150px;
z-index:5;
}
#right {
background-color: #00CC00;
height: 700px;
width: 200px;
position: absolute;
z-index: 5;
top: 150px;
right: 0px;
}
#top {
background-color: #CCCC00;
height: 150px;
width: 100%;
position: absolute;
z-index: 5;
left: 0px;
top: 0px;
}
-->
</style>
</head>
<script language="javascript" type="text/jscript">
drag = 0;
move = 0;
function mousedown()
{
if(drag)
{
X1 = window.event.x - parseInt(dragimages.style.left);
dragimages.style.Index += 1;
move = 1;
}
}
function mouseStop()
{
window.event.returnValue = false;
}
function mousemove()
{
if (move)
{
dragimages.style.left = window.event.x - X1;
}
}
function mouseup()
{
move = 0;
}
function remove()
{
document.all.div1.onmousemove = mousemove;
document.all.div1.onmousedown = mousedown;
document.all.div1.onmouseup = mouseup;
document.all.div1.ondragstart = mouseStop;
}
/*function bigimg(i)
{
var zoom = parseInt(i.style.zoom,10)||100;
zoom += event.wheelDelta / 12;
if(zoom > 0 )
i.style.zoom=zoom+'%';
return false;
}*/
</script>
<body onload="remove()">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="div1" onmouseover="dragimages=div1;drag=1;"style="height:77px;left:200px;position:absolute;top:150px;width:90px;z-index:1">
<asp:Image ID="Image1" runat="server" ImageUrl="image/MapWenZhou.gif" width="901" height="637" style="cursor:pointer " />
</div>
</body>
</html>
对，如果拖动图片移动的范围没有一个限制的话，相框里面就会出现空白。
我把图片放在div1里面的，写了js
其他的层都是相框的边
http://www.wz121.com/
这个网站中，在城市天气预报之类有地图的页面看看就知道我要的效果了，拖动图片，不露出空白 展开
4个回答
展开全部
不是很明白你的意思，你代码拖动的是那个div啊。另外，是完全露出来还是刚好露出来？？看你应该是想实现下面的功能：1个相框，图片比相框大，想拖动图片，往左拖动的时候，图片右侧刚好露出，就不能再拖，往右边拖动的时候，图片左侧刚好露出，就是说，不让相框里面出现空白，完全被图片填充。是不是啊？？
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
jquery有完美的插件
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个HTML编码
难
我只知道随意拖动图片的代码
至于范围的问题，我还没有思考过！！
难
我只知道随意拖动图片的代码
至于范围的问题，我还没有思考过！！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你想实现的效果不是很明确!~解释下.
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
