本文介绍了一种使用HTML和JavaScript实现网页中图片拖动效果的方法。通过简单的代码示例展示了如何让图片元素响应鼠标拖动事件，并保持拖动位置与鼠标光标相对位置不变。
<html>
<head>
<style type='text/css'>
.wen p{
text-align:left;
margin:15px 0 0 5px;
}
</style>
<script type='text/javascript'>
var xx=0,yy=0;
function movea(v){
xx=event.x-v.offsetLeft;
yy=event.y-v.offsetTop;
}
function moveb(v){
v.style.left=event.x-xx;
v.style.top=event.y-yy;
}
</script>
</head>
<body>
<img id='img' src='01.jpg' style='position:absolute'
ondragstart='movea(this);' ondrag='moveb(this);'>
</body>
</html>
<head>
<style type='text/css'>
.wen p{
text-align:left;
margin:15px 0 0 5px;
}
</style>
<script type='text/javascript'>
var xx=0,yy=0;
function movea(v){
xx=event.x-v.offsetLeft;
yy=event.y-v.offsetTop;
}
function moveb(v){
v.style.left=event.x-xx;
v.style.top=event.y-yy;
}
</script>
</head>
<body>
<img id='img' src='01.jpg' style='position:absolute'
ondragstart='movea(this);' ondrag='moveb(this);'>
</body>
</html>
<wbr></wbr>
扫一扫
722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
