js—网页中拖动图片

js—网页中拖动图片

  程序代码如下：

< style >
<!-- .drag{position:relative;cursor:hand}
-->
</ 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 " >

程序代码讲解：

<style> <!--.drag{position:relative;cursor:hand} --> </style> 定义一个样式。 <script language="JavaScript"> var dragapproved=false var z,x,y 声明几个变量。 function move() { if (event.button==1&&dragapproved) 定义一个函数move()，判断鼠标是否是按下状态。 { z.style.pixelLeft=temp1+event.clientX-x z.style.pixelTop=temp2+event.clientY-y return false }} 定义图片左上角的位置。 function drags() { if (!document.all) return 定义一个函数drags()。如果是Netscape浏览器，就返回。所以此效果，在Netscape浏览器中看不到。 if (event.srcElement.className=="drag") { dragapproved=true z=event.srcElement temp1=z.style.pixelLeft temp2=z.style.pixelTop x=event.clientX y=event.clientY 如果鼠标左键被按下，返回z，temp1，temp2，x，y的值。 document.onmousemove=move }} document.onmousedown=drags document.onmouseup=new Function("dragapproved=false") </script> 当鼠标移动时，执行move（）函数，当鼠标按下的时候，执行drags函数，当鼠标抬起的时候，不执行任何函数。 <img src="img/draw.jpg" class="drag"> 在页面中插入一张图片。