资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
js实现的拖动后记录轨迹并运行
效果如图所示:
演示代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>拖动_轨迹运行</title> <style type="text/css"> * {margin:0px;padding:0px;} #div1 {position:relative;left:200px;top:200px;width:100px; height:100px; background-color:#f60;cursor:move;} </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20isIE%20%3D%20(document.all)%3Ftrue%3Afalse%3B%20%0D%0Avar%20%24ID%20%3D%20function(id)%7B%20%0D%0Areturn%20%22string%22%3D%3Dtypeof%20id%3Fdocument.getElementById(id)%3Aid%3B%20%0D%0A%7D%20%0D%0Avar%20Class%20%3D%20%7B%20%0D%0Acreate%3Afunction()%7B%20%0D%0Areturn%20function()%7B%20%0D%0Athis.initilize.apply(this%2Carguments)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Avar%20Extend%20%3D%20function(destination%2C%20source)%7B%20%0D%0Afor(var%20property%20in%20source)%7B%20%0D%0Adestination%5Bproperty%5D%20%3D%20source%5Bproperty%5D%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Avar%20Bind%20%3D%20function(object%2Cfun)%7B%20%0D%0Avar%20args%20%3D%20Array.prototype.slice.call(arguments).slice(2)%3B%20%0D%0Areturn%20function()%7B%20%0D%0Areturn%20fun.apply(object%2Cargs)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Avar%20BindAsEventListener%20%3D%20function(object%2Cfun)%7B%20%0D%0Avar%20args%20%3D%20Array.prototype.slice.call(arguments).slice(2)%3B%20%0D%0Areturn%20function(event)%7B%20%0D%0Areturn%20fun.apply(object%2C%5Bevent%7C%7Cwindow.event%5D.concat(args))%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20addEventHandler(oTarget%2C%20sEventType%2C%20fnHandler)%20%7B%20%0D%0Aif%20(oTarget.addEventListener)%20%7B%20%0D%0AoTarget.addEventListener(sEventType%2C%20fnHandler%2C%20false)%3B%20%0D%0A%7D%20else%20if%20(oTarget.attachEvent)%20%7B%20%0D%0AoTarget.attachEvent(%22on%22%20%2B%20sEventType%2C%20fnHandler)%3B%20%0D%0A%7D%20else%20%7B%20%0D%0AoTarget%5B%22on%22%20%2B%20sEventType%5D%20%3D%20fnHandler%3B%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0Afunction%20removeEventHandler(oTarget%2C%20sEventType%2C%20fnHandler)%20%7B%20%0D%0Aif%20(oTarget.removeEventListener)%20%7B%20%0D%0AoTarget.removeEventListener(sEventType%2C%20fnHandler%2C%20false)%3B%20%0D%0A%7D%20else%20if%20(oTarget.detachEvent)%20%7B%20%0D%0AoTarget.detachEvent(%22on%22%20%2B%20sEventType%2C%20fnHandler)%3B%20%0D%0A%7D%20else%20%7B%20%0D%0AoTarget%5B%22on%22%20%2B%20sEventType%5D%20%3D%20null%3B%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0Afunction%20getNodePosition(node%2Ctype)%7B%2F%2Ftype%3D%22left%22or%22top%22%20%0D%0Avar%20nodeTemp%20%3D%20node%3B%20%0D%0Avar%20l%20%3D%200%3B%20%0D%0Avar%20t%20%3D%200%3B%20%0D%0Awhile(nodeTemp!%3Ddocument.body%26%26nodeTemp!%3Dnull)%7B%20%0D%0Al%20%2B%3D%20nodeTemp.offsetLeft%3B%20%0D%0At%20%2B%3D%20nodeTemp.offsetTop%3B%20%0D%0AnodeTemp%20%3D%20nodeTemp.offsetParent%3B%20%0D%0A%7D%20%0D%0Aif(type.toLowerCase()%3D%3D%22left%22)%20return%20l%3B%20%0D%0Aelse%20return%20t%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E5%89%8D%E9%9D%A2%E9%80%9A%E5%B8%B8%E9%83%BD%E7%94%A8%E4%B8%80%E4%B8%AAbase.js%E5%B0%81%E8%A3%85%20%0D%0A%3C%2Fscript%3E"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20MyDrag%20%3D%20Class.create()%3B%20%0D%0AMyDrag.prototype%20%3D%20%7B%20%0D%0Ainitilize%3Afunction(obj)%7B%20%0D%0Athis.Obj%20%3D%20%24ID(obj)%3B%20%0D%0Athis._x%20%3D%20this._y%20%3D%200%3B%20%0D%0Athis._xx%20%3D%20this._yy%20%3D%200%3B%2F%2FMove%E8%AE%B0%E5%BD%95%E5%9D%90%E6%A0%87%20%0D%0Athis.Obj.style.position%20%3D%20%22absolute%22%3B%20%0D%0Athis._pos%20%3D%20%5B%5D%3B%20%0D%0Athis._ifSavePos%20%3D%20true%3B%20%0D%0Athis._t%20%3D%20null%3B%20%0D%0Athis._speed%20%3D%2010%3B%20%0D%0Athis._indexMove%20%3D%200%3B%2F%2F%E5%85%A8%E5%B1%80%E7%9A%84MoveIndex%20%0D%0Athis._fnStart%20%3D%20BindAsEventListener(this%2Cthis.Start)%3B%20%0D%0Athis._fnMove%20%3D%20BindAsEventListener(this%2Cthis.Move)%3B%20%0D%0Athis._fnStop%20%3D%20Bind(this%2Cthis.Stop)%3B%20%0D%0AaddEventHandler(this.Obj%2C%22mousedown%22%2Cthis._fnStart)%3B%20%0D%0A%7D%2C%20%0D%0AStart%3Afunction(oEvent)%7B%20%0D%0Aif(!this._ifSavePos)%20%0D%0Athis._pos%20%3D%20%5B%5D%3B%20%0D%0Athis.Drag%20%3D%20this.Obj.cloneNode(true)%3B%20%0D%0Aif(isIE)%20this.Drag.style.filter%20%3D%20%22alpha(opacity%3D50)%22%3B%20%0D%0Aelse%20this.Drag.style.opacity%20%3D%20%220.5%22%3B%20%0D%0Athis.Obj.parentNode.appendChild(this.Drag)%3B%20%0D%0A%0D%0Athis._left1%20%3D%20this._xx%20%3D%20getNodePosition(this.Obj%2C%22left%22)%3B%20%0D%0Athis._top1%20%3D%20this._yy%20%3D%20getNodePosition(this.Obj%2C%22top%22)%3B%20%0D%0Athis._x%20%3D%20oEvent.clientX%20-%20this.Obj.offsetLeft%3B%20%0D%0Athis._y%20%3D%20oEvent.clientY%20-%20this.Obj.offsetTop%3B%20%0D%0AaddEventHandler(document%2C%22mousemove%22%2Cthis._fnMove)%3B%20%0D%0AaddEventHandler(document%2C%22mouseup%22%2Cthis._fnStop)%3B%20%0D%0Athis._t%20%3D%20setInterval(Bind(this%2Cthis.SavePos)%2C10)%3B%20%0D%0A%7D%2C%20%0D%0ASavePos%3Afunction()%7B%2F%2F%E8%AE%B0%E5%BD%95%E5%9D%90%E6%A0%87%E7%82%B9%20%0D%0Athis._pos.push(this._xx%20%2B%20%22_%22%20%2B%20this._yy)%3B%20%0D%0A%7D%2C%20%0D%0AMove%3Afunction(oEvent)%7B%20%0D%0Aif(isIE)%20oEvent.returnValue%20%3D%20false%3B%20%0D%0Athis._xx%20%3D%20oEvent.clientX%20-%20this._x%3B%20%0D%0Athis._yy%20%3D%20oEvent.clientY%20-%20this._y%3B%20%0D%0Athis.Drag.style.left%20%3D%20this._xx%20%2B%20%22px%22%3B%20%0D%0Athis.Drag.style.top%20%3D%20this._yy%20%2B%20%22px%22%3B%20%0D%0A%7D%2C%20%0D%0AStop%3Afunction()%7B%20%0D%0AremoveEventHandler(document%2C%22mousemove%22%2Cthis._fnMove)%3B%20%0D%0AremoveEventHandler(document%2C%22mouseup%22%2Cthis._fnStop)%3B%20%0D%0Athis.Obj.parentNode.removeChild(this.Drag)%3B%20%0D%0Athis.Obj.style.left%20%3D%20this._xx%20%2B%20%22px%22%3B%20%0D%0Athis.Obj.style.top%20%3D%20this._yy%20%2B%20%22px%22%3B%20%0D%0AclearInterval(this._t)%3B%20%0D%0Athis._fnCloneMove%20%3D%20Bind(this%2Cthis.CloneMove)%3B%20%0D%0Athis._t%20%3D%20setTimeout(this._fnCloneMove%2C50)%3B%20%0D%0A%7D%2C%20%0D%0ACloneMove%3Afunction()%7B%20%0D%0Aif(this._indexMove%3C6)%7B%20%0D%0Anew%20ObjMove(%7Bx1%3Athis._left1%2Cy1%3Athis._top1%2Cx2%3Athis._xx%2Cy2%3Athis._yy%2Cpos%3Athis._pos%7D)%3B%20%0D%0Athis._indexMove%2B%2B%3B%20%0D%0Athis._t%20%3D%20setTimeout(this._fnCloneMove%2C50)%3B%20%0D%0A%7Delse%7B%20%0D%0AclearTimeout(this._t)%3B%20%0D%0Athis._indexMove%20%3D%200%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Avar%20ObjMove%20%3D%20Class.create()%3B%20%0D%0AObjMove.prototype%20%3D%20%7B%20%0D%0Ainitilize%3Afunction(options)%7B%20%0D%0Athis.SetOptions(options)%3B%20%0D%0Athis.Obj%20%3D%20document.createElement(%22DIV%22)%3B%20%0D%0Athis.Obj.style.cssText%20%3D%20%22position%3Aabsolute%3Bleft%3A%22%2B%20this.options.x1%20%2B%22px%3Btop%3A%22%2B%20this.options.y1%20%2B%22px%3Bwidth%3A100px%3Bheight%3A100px%3Bbackground-color%3A%23f60%3Bfliter%3Aalpha(opacity%3D100)%3Bopacity%3A1%3B%22%3B%20%0D%0Adocument.body.appendChild(this.Obj)%3B%20%0D%0Athis.Move2()%3B%20%0D%0A%7D%2C%20%0D%0ASetOptions%3A%20function(options)%20%7B%20%0D%0Athis.options%20%3D%20%7B%2F%2F%E9%BB%98%E8%AE%A4%E5%80%BC%20%0D%0Ax1%3A%200%2C%20%0D%0Ay1%3A%200%2C%20%0D%0Ax2%3A%200%2C%20%0D%0Ay2%3A%200%2C%20%0D%0Apos%3A%20%5B%5D%20%0D%0A%7D%3B%20%0D%0AExtend(this.options%2C%20options%20%7C%7C%20%7B%7D)%3B%20%0D%0A%7D%2C%20%0D%0AMove2%3Afunction()%7B%20%0D%0Athis._indexMove%20%3D%200%3B%20%0D%0Athis._fnMovePos%20%3D%20Bind(this%2Cthis.MovePos)%3B%20%0D%0Athis._t%20%3D%20setInterval(this._fnMovePos%2C10)%3B%20%0D%0A%7D%2C%20%0D%0AMovePos%3Afunction()%7B%20%0D%0Aif(this._indexMove%3E%3Dthis.options.pos.length)%7B%20%0D%0Athis.options.pos%20%3D%20%5B%5D%3B%20%0D%0Adocument.body.removeChild(this.Obj)%3B%20%0D%0AclearInterval(this._t)%3B%20%0D%0A%7Delse%7B%20%0D%0Athis.Obj.style.left%20%3D%20this.options.pos%5Bthis._indexMove%5D.split(%22_%22)%5B0%5D%20%2B%20%22px%22%3B%20%0D%0Athis.Obj.style.top%20%3D%20this.options.pos%5Bthis._indexMove%5D.split(%22_%22)%5B1%5D%20%2B%20%22px%22%3B%20%0D%0A%7D%20%0D%0Athis._indexMove%2B%2B%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Aonload%20%3D%20function()%7B%20%0D%0Avar%20myDrag%20%3D%20new%20MyDrag(%22div1%22)%3B%20%0D%0A%24ID(%22rad1%22).onclick%20%3D%20function()%7B%20%0D%0AmyDrag._ifSavePos%20%3D%20true%3B%20%0D%0A%7D%20%0D%0A%24ID(%22rad2%22).onclick%20%3D%20function()%7B%20%0D%0AmyDrag._ifSavePos%20%3D%20false%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </head> <body> <div>随意拖动那个小方块几秒钟</div> <label for="rad1"><input type="radio" id="rad1" name="rad" checked="checked"/>记住轨迹</label> <label for="rad2"><input type="radio" id="rad2" name="rad"/>不记住轨迹</label> <div id="div1"> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程
