2008年3月14日 星期五

移動圖片特效

步驟一、複製程式碼至<head></head>之間

<style>

.drag{position:relative;cursor:hand}

</style>


步驟二、複製程式碼至<body>下方

<script language="JavaScript1.2">

<!--

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="10.gif" class="drag" width="242" height="36">

 

修改事項:
可省略步驟三:當您將圖片放入網頁上後,只要在圖片標籤加入class="drag"就可移動了。

沒有留言: