javascript在一定范围内拖动图片的代码

一个类似相框的页面,图片放在最下面一层,相框的窗口比图片小点,可以用鼠标左右拖动图片,在相框中显示。
问题是,左右拖动的时候,想让他不要在整个浏览器中跑,往左拖到图片右侧完全露出来就停止,不能再拖;往右拖动的时候,图片左侧完全露出来就好,不能再继续往右拖。
现在,拖动的代码已经写好,怎么使拖动的范围有个限制?

<%@ 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/
这个网站中,在城市天气预报之类有地图的页面看看就知道我要的效果了,拖动图片,不露出空白

不是很明白你的意思,你代码拖动的是那个div啊。另外,是完全露出来还是刚好露出来??看你应该是想实现下面的功能:1个相框,图片比相框大,想拖动图片,往左拖动的时候,图片右侧刚好露出,就不能再拖,往右边拖动的时候,图片左侧刚好露出,就是说,不让相框里面出现空白,完全被图片填充。是不是啊??
温馨提示:答案为网友推荐,仅供参考
第1个回答  2008-11-22
jquery有完美的插件
第2个回答  2008-11-21
这个HTML编码

我只知道随意拖动图片的代码
至于范围的问题,我还没有思考过!!
第3个回答  2008-11-22
你想实现的效果不是很明确!~解释下.

相关了解……

你可能感兴趣的内容

大家正在搜

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网