如何实现网页按下鼠标可拖动？

kwiner 2003-01-08 06:51:45

我的网页是用来显示图片的，即一个网页只有一幅图片
当图很大时，会出现右、下滚动条，我想实现像acdsee
一样在图片上显示一个手形，当用户拖动时即可移动图
片

这种效果该如何实现，谢谢!

...全文

102 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

kwiner 2003-01-20

打赏
举报

good

tata_1980 2003-01-08

打赏
举报

<SCRIPT>
var old_y=0; //记录鼠标按下时的Ｙ轴位置
var yn=0; //用于记录鼠标状态
function moveit()
{
if(yn==1 && event.button==1) //如果鼠标左键按下就移动页面
document.body.scrollTop=(old_y-event.clientY); //移动页面
}
function downit()
{old_y=event.clientY+document.body.scrollTop; //记住鼠标按下时的Ｙ轴位置
yn=1; //用于记住鼠标已按下
}

function upit()
{yn=0;} //记住鼠标已放开

document.onmouseup=upit; //鼠标放开时执行upit()函数
document.onmousedown=downit; //鼠标按下时执行downit()函数
document.onmousemove =moveit; //鼠标移动时执行moveit()函数
</SCRIPT>

<SCRIPT language=JavaScript>
var i=0;
for(i=0;i<100;i++){
document.write("<span style='cursor:hand;font:menu'>"+i+"－－－－－－－－－－－－－－－－－－－－－－－－－－－－</span><br>");
}

</SCRIPT>

方工 2003-01-08

打赏
举报

改进
更为通用的写法，将代码放到一个js文件中，再包含进来，
页面只需放一图片即可。
不必为每张页面写重复的代码

主文件：

<html><head>
<script src="drag_layer.js"></script>
</head>
<body>
<img src="http://cimg.163.com/movie/0206/13/yuka01_b.jpg">
</body></html>

//drag_layer.js

function drag_layer()
{
var e = event.srcElement;
with(e){
if(down==1){
style.pixelLeft += window.event.clientX - px;
style.pixelTop += window.event.clientY - py;
px=event.clientX;py=event.clientY;
}
}
}
function init(){
var e = document.getElementsByTagName("IMG")[0];
if(!e) return;
with(e){
style.position = "absolute";
style.top = "0";
style.left = "0";
style.cursor="move";
px = 0; py=0; down=0;
ondrag = new Function("return false");
onmousedown = new Function("px=event.clientX;py=event.clientY; down=1;");
onmouseup = new Function("down=0");
onmousemove = drag_layer;
}
}
window.onload=init;

skyover 2003-01-08

打赏
举报

好，一刺果然高手。

3332221119 2003-01-08

打赏
举报

<html>
<head>
</head>
<body>
<style>

</style>
<script language="JavaScript">
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
</script>
<img src="img/draw.jpg" class="drag">
</body>
</html>

方工 2003-01-08