- ·上一篇文章:横向图片滚动js代码
- ·下一篇文章:用的javascript效果(三)
当前位置:K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS01 → 文章内容
实现网页上的图片任意拖动
<
style>
<
!--
.drag
{position:relative
cursor:hand}
-->
<
/style>
<
script 
language="
JavaScript1.2"
>
<
!--
var 
dragapproved=false
var 
z,x,y
function 
move()
{
if 
(event.button==1&
#38
&
#38
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=0001.jpg 
width=80 
height=80 
class="
drag"
>
<
br>
<
br>
<
img 
src=0002.jpg 
width=80 
height=80 
class="
drag"
>
<
br>
<
br>
<
img 
src=0003.jpg 
width=80 
height=80 
class="
drag"
>
<
br>
<
br>
<
img 
src=0004.jpg 
width=80 
height=80 
class="
drag"
>
style>
<
!--
.drag
{position:relative
cursor:hand}
-->
<
/style>
<
script 
language="
JavaScript1.2"
>
<
!--
var 
dragapproved=false
var 
z,x,y
function 
move()
{
if 
(event.button==1&
#38
&
#38
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=0001.jpg 
width=80 
height=80 
class="
drag"
>
<
br>
<
br>
<
img 
src=0002.jpg 
width=80 
height=80 
class="
drag"
>
<
br>
<
br>
<
img 
src=0003.jpg 
width=80 
height=80 
class="
drag"
>
<
br>
<
br>
<
img 
src=0004.jpg 
width=80 
height=80 
class="
drag"
>
实现网页上的图片任意拖动