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"> 在页面中插入一张图片。


posted on 2009-04-16 13:40 胡鹏 阅读(1512) 评论(0)  编辑  收藏 所属分类: js,html,css


只有注册用户登录后才能发表评论。


网站导航:
 

导航

<2009年4月>
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789

统计

常用链接

留言簿(3)

随笔分类

随笔档案

agile

搜索

最新评论

阅读排行榜

评论排行榜