编辑您的代码：提交代码

​x
 
1
2
3
<html>
4
<head>
5
<style>
6
div
7
{
8
width:160px;
9
height:120px;
10
}
11
img
12
{
13
position:relative;
14
}
15
span
16
{
17
position:absolute;
18
left:0px;
19
top:0px;
20
}
21
</style>
22
<script type="text/javascript">
23
mouseover=true
24
​
25
function coordinates()
26
{
27
if (!moveMe)
28
    {
29
    return
30
    }
31
if (event.srcElement.id=="moveMe")
32
    {
33
    mouseover=true
34
    pleft=document.getElementById('moveMe').style.pixelLeft
35
    ptop=document.getElementById('moveMe').style.pixelTop
36
    xcoor=event.clientX
37
    ycoor=event.clientY
38
    document.onmousemove=moveImage
39
    }
40
}
41
​
42
function moveImage()
43
{
44
if (mouseover&&event.button==1)
45
    {
46
    document.getElementById('moveMe').style.pixelLeft=pleft+event.clientX-xcoor
47
    document.getElementById('moveMe').style.pixelTop=ptop+event.clientY-ycoor
48
    return false
49
    }
50
}
51
function mouseup()
52
{
53
mouseover=false
54
}
55
document.onmousedown=coordinates
56
document.onmouseup=mouseup
57
</script>
58
​
59
</head>
60
<body>
61
<span>请移动这个图形：</span>
62
<br />
63
<div style="position:absolute;left:0;top:20;">
64
<img src="/i/eg_landscape.jpg" width="160" height="120" /></div>
65
<div style="position:absolute;left:0;top:20;filter:mask(color=#ffffff);width:160;height:120">
66
<img id="moveMe" src="/i/eg_smile.gif" width="40" height="40"></div>
67
</body>
68
</html>
69
          

查看结果：

请在上面的文本框中编辑您的代码，然后单击提交按钮测试结果。w3c0.com

W3c0.com 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。W3c0 简体中文版的所有内容仅供测试，对任何法律问题及风险不承担任何责任。 当使用本站时，代表您已接受了本站的使用条款和隐私条款。版权所有，保留一切权利。 鲁ICP备15022115号