IDC资讯中心
今天做一个功能：让一个图片在指定高和宽和层中拖动，并有一个老外的参考网站。看了那个网站上那个功能，一开始就想到是js实现的，于是我就将页面另存下来，结果页面不能使用，看了一下它的源码，发现并不是js实现的，老外的东西真是难懂。
实在没有办法，于是只能动手写了，使用js去实现。经过一个多小时的测试，终于搞定了。
代码如下:
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> javascript实现图片在固定大小的层中拖动 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
/*
功能：javascript实现图片在固定大小的层中拖动
开发：www.aspprogram.cn
作者：wangsdong
注意：原创文章，转载请保留些信息
*/
var x0=0,y0=0,x1=0,y1=0,x=0,y=0;
var moveable=false;
//开始拖动;
function startDrag(obj){
if(event.button==1){
obj.setCapture();
var win = obj.parentNode;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.offsetLeft);
y1 = parseInt(win.offsetTop);
moveable = true;
}
}
//拖动;
function drag(obj){
if(moveable){
var win = obj.parentNode;
x = parseInt(x1 + event.clientX – x0);
y = parseInt(y1 + event.clientY – y0);
pic_x=$("bigpic").style.width;
pic_y=$("bigpic").style.height;
pic_x=parseInt(pic_x.replace("px",""))
pic_y=parseInt(pic_y.replace("px",""))
div_x=$("div1").style.width;
div_x=parseInt(div_x.replace("px",""))
div_y=$("div1").style.height;
div_y=parseInt(div_y.replace("px",""))
if (x<=div_x-pic_x)
{
x=div_x-pic_x;
}
else
{
if (x>=0)
{
x=0;
}
}
if (y<=div_y-pic_y)
{
y=div_y-pic_y;
}
else
{
if (y>=0)
{
y=0;
}
}
win.style.left=x;
win.style.top =y;
}
}
//停止拖动;
function stopDrag(obj){
if(moveable){
obj.releaseCapture();
moveable = false;
}
}
function $(id)
{
return document.getElementById(id);
}
</script>
<BODY>
<div style="width:250px; height:200px; overflow:hidden; border:2px #000000 solid;" id="div1">
<div style="cursor:hand; position:absolute;"><img src="http://www.aspprogram.cn/test/ymd32.jpg" alt="姚明" onmousedown="startDrag(this)" onmouseup="stopDrag(this)" onmousemove="drag(this)" style="width:800px; height:600px;" id="bigpic"/></div>
</div>
</BODY>
</HTML>
[/code]
