繁體中文当前位置: 首页 > 实例教程 > 脚本特效 > 图片特效 > 可拖动元素的脚本
- 图片特效
- 跟踪的眼睛
- 预载图片(带进度条)
- 可拖动元素的脚本
- 跳跃的球
图片特效 中的 可拖动元素的脚本
演示：
将拖动元素用的引擎JS放到head区域内
<style type="text/css">
.drag{
position:relative;
cursor:hand;
z-index: 100;
}
</style>
<script type="text/javascript">
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}
dragobject.initialize()
</script>
第二步：让元素可拖动的关键（让元素的class属性值变成drag）
<html>
<head>
</head>
<body>
<img src="/example/files/b/test.gif" class="drag"><br>
<img src="/example/files/b/test2.gif" class="drag"><br>
<h1><b>"Hi there</b></h1>
</body>
</html>
评论 (0) All
