资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
JavaScript滑移效果代码
代码：
<!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>js滑移效果</title> <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%20%24%20%3D%20function%20(id)%20%7B%20%0D%0Areturn%20%22string%22%20%3D%3D%20typeof%20id%20%3F%20document.getElementById(id)%20%3A%20id%3B%20%0D%0A%7D%3B%20%0D%0A%0D%0Afunction%20Event(e)%7B%20%0D%0Avar%20oEvent%20%3D%20document.all%20%3F%20window.event%20%3A%20e%3B%20%0D%0Aif%20(document.all)%20%7B%20%0D%0AoEvent.pageX%20%3D%20oEvent.clientX%20%2B%20document.documentElement.scrollLeft%3B%20%0D%0AoEvent.pageY%20%3D%20oEvent.clientY%20%2B%20document.documentElement.scrollTop%3B%20%0D%0A%7D%20%0D%0Areturn%20oEvent%3B%20%0D%0A%7D%20%0D%0A%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%0A%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%0A%0D%0Avar%20Class%20%3D%20%7B%20%0D%0Acreate%3A%20function()%20%7B%20%0D%0Areturn%20function()%20%7B%20%0D%0Athis.initialize.apply(this%2C%20arguments)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0AObject.extend%20%3D%20function(destination%2C%20source)%20%7B%20%0D%0Afor%20(var%20property%20in%20source)%20%7B%20%0D%0Adestination%5Bproperty%5D%20%3D%20source%5Bproperty%5D%3B%20%0D%0A%7D%20%0D%0Areturn%20destination%3B%20%0D%0A%7D%20%0D%0A%0D%0A%0D%0Avar%20Slippage%20%3D%20Class.create()%3B%20%0D%0ASlippage.prototype%20%3D%20%7B%20%0D%0Ainitialize%3A%20function(obj%2C%20options)%20%7B%20%0D%0A%0D%0Athis.obj%20%3D%20%24(obj)%3B%20%0D%0Athis._timer%20%3Dnull%3B%20%0D%0Athis._xs%20%3D%20this._ys%20%3D%20%5B%5D%3B%20%0D%0Athis.X%20%3D%20parseInt(this.obj.style.left)%20%7C%7C%200%3B%20%0D%0Athis.Y%20%3D%20parseInt(this.obj.style.top)%20%7C%7C%200%3B%20%0D%0A%0D%0Athis.SetOptions(options)%3B%20%0D%0Athis.Step%20%3D%20Math.abs(this.options.Step)%3B%20%0D%0Athis.Time%20%3D%20Math.abs(this.options.Time)%3B%20%0D%0Athis.Loop%20%3D%20this.options.Loop%3B%20%0D%0Athis.Relative%20%3D%20this.options.Relative%3B%20%0D%0A%0D%0Athis.SetPosition(this.options.X%20%7C%7C%20%5B%5D%2C%20this.options.Y%20%7C%7C%20%5B%5D)%3B%20%0D%0A%7D%2C%20%0D%0A%2F%2F%E8%AE%BE%E7%BD%AE%E9%BB%98%E8%AE%A4%E5%B1%9E%E6%80%A7%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%0AStep%3A%2010%2C%2F%2F%E6%BB%91%E5%8A%A8%E5%8F%98%E5%8C%96%E7%8E%87%20%0D%0ATime%3A%2010%2C%2F%2F%E6%BB%91%E5%8A%A8%E5%BB%B6%E6%97%B6%20%0D%0AX%3A%20%5B%5D%2C%2F%2Fx%E5%9D%90%E6%A0%87%E5%8F%98%E5%8C%96%20%0D%0AY%3A%20%5B%5D%2C%2F%2Fy%E5%9D%90%E6%A0%87%E5%8F%98%E5%8C%96%20%0D%0ALoop%3A%20false%2C%2F%2F%E6%98%AF%E5%90%A6%E5%BE%AA%E7%8E%AF%20%0D%0ARelative%3A%20true%2F%2F%E6%98%AF%E5%90%A6%E7%9B%B8%E5%AF%B9%E4%BD%8D%E7%BD%AE%20%0D%0A%7D%3B%20%0D%0AObject.extend(this.options%2C%20options%20%7C%7C%20%7B%7D)%3B%20%0D%0A%7D%2C%20%0D%0A%2F%2F%20%0D%0ASetPosition%3A%20function(arrX%2C%20arrY)%20%7B%20%0D%0Aif(arrX.length%20%3C%3D%200%20%26%26%20arrX.length%20%3C%3D%200)%20return%20false%3B%20%0D%0Aelse%20if(arrX.length%20%3C%3D%200)%20arrX%20%3D%20%5B0%5D%3B%20%0D%0Aelse%20if(arrY.length%20%3C%3D%200)%20arrY%20%3D%20%5B0%5D%3B%20%0D%0A%0D%0Athis._xs%20%3D%20arrX%3B%20this._ys%20%3D%20arrY%3B%20%0D%0A%0D%0Aif(this.Relative)%7B%20%0D%0Afor(var%20i%20in%20this._xs)%7B%20if%20(i%20%3D%3D%200)%20%7B%20this._xs%5B0%5D%20%2B%3D%20this.X%3B%20%7D%20else%20%7B%20this._xs%5Bi%5D%20%2B%3D%20this._xs%5Bi-1%5D%3B%20%7D%20%7D%20%0D%0Afor(var%20i%20in%20this._ys)%7B%20if%20(i%20%3D%3D%200)%20%7B%20this._ys%5B0%5D%20%2B%3D%20this.Y%3B%20%7D%20else%20%7B%20this._ys%5Bi%5D%20%2B%3D%20this._ys%5Bi-1%5D%3B%20%7D%20%7D%20%0D%0A%7D%20%0D%0A%0D%0Athis.Set()%3B%20%0D%0A%7D%2C%20%0D%0A%2F%2F%20%0D%0ASet%3A%20function()%20%7B%20%0D%0A%2F%2F%E5%BD%93%E5%85%A8%E9%83%A8%E5%9D%90%E6%A0%87%E6%8C%87%E5%90%91%E5%90%8C%E4%B8%80%E4%B8%AA%E4%BD%8D%E7%BD%AE%E6%97%B6%E4%BC%9A%E8%BF%9B%E5%85%A5%E6%AD%BB%E5%BE%AA%E7%8E%AF%20%0D%0Aif(this._xs.length%20%3C%3D%200%20%26%26%20this._ys.length%20%3C%3D%200)%20return%3B%20%0D%0A%0D%0Aif(this._xs.length%20%3E%200)%20this.X%20%3D%20this._xs.shift()%3B%20%0D%0Aif(this._ys.length%20%3E%200)%20this.Y%20%3D%20this._ys.shift()%3B%20%0D%0A%0D%0Aif(this.Loop%20%26%26%20this._xs.length%20%3E%200%20%26%26%20this._ys.length%20%3E%200)%20%7B%20this._xs.push(this.X)%3Bthis._ys.push(this.Y)%3B%20%7D%20%0D%0A%0D%0A%2F%2F%24(%22aa%22).innerHTML%2B%3Dthis._ys.length%2B%22%3D%22%3B%20%0D%0Athis.Move(this.X%2C%20this.Y)%3B%20%0D%0A%7D%2C%20%0D%0A%2F%2F%20%0D%0AMove%3A%20function(iX%2C%20iY)%20%7B%20%0D%0AclearTimeout(this._timer)%3B%20%0D%0A%0D%0Avar%20iLeft%20%3D%20parseInt(this.obj.style.left)%20%7C%7C%200%2C%20iTop%20%3D%20parseInt(this.obj.style.top)%20%7C%7C%200%2C%20iLeftStep%20%3D%20this.GetStep(iX%2C%20iLeft)%2C%20iTopStep%20%3D%20this.GetStep(iY%2C%20iTop)%3B%20%0D%0A%0D%0Aif%20(iLeftStep%20%3D%3D%200%20%26%26%20iTopStep%20%3D%3D%200)%20%7B%20%0D%0Athis.Set()%3B%20%0D%0A%7D%20else%20%7B%20%0D%0Athis.obj.style.left%20%3D%20(iLeft%20%2B%20iLeftStep)%20%2B%20%22px%22%3B%20this.obj.style.top%20%3D%20(iTop%20%2B%20iTopStep)%20%2B%20%22px%22%3B%20%0D%0Avar%20oThis%20%3D%20this%3B%20this._timer%20%3D%20setTimeout(function()%7B%20oThis.Move(iX%2C%20iY)%3B%20%7D%2C%20this.Time)%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0A%2F%2F%20%0D%0AGetStep%3A%20function(iTarget%2C%20iNow)%20%7B%20%0D%0Avar%20iStep%20%3D%20(iTarget%20-%20iNow)%20%2F%20this.Step%3B%20%0D%0Aif%20(iStep%20%3D%3D%200)%20return%200%3B%20%0D%0Aif%20(Math.abs(iStep)%20%3C%201)%20return%20(iStep%20%3E%200%20%3F%201%20%3A%20-1)%3B%20%0D%0Areturn%20iStep%3B%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0A%0D%0Awindow.onload%20%3D%20function()%7B%20%0D%0Anew%20Slippage(%22idSlippage3%22%2C%20%7B%20X%3A%20%5B200%2C200%2C0%2C-200%2C-100%2C-100%5D%2C%20Y%3A%20%5B0%2C0%2C100%2C-100%2C100%2C-100%5D%2C%20Loop%3A%20true%20%7D)%3B%20%0D%0A%0D%0Avar%20oSlippage%20%3D%20new%20Slippage(%22idSlippage%22)%3B%20%0D%0A%24(%22aa%22).onclick%20%3D%20function(e)%7B%20var%20oEvent%20%3D%20Event(e)%3BoSlippage.Move(oEvent.pageX%2C%20oEvent.pageY)%3B%7D%20%0D%0A%0D%0Avar%20oSlippage2%20%3D%20new%20Slippage(%22idSlippage2%22%2C%20%7B%20Step%3A%201%2C%20Relative%3A%20false%20%7D)%2Cx%3D%5B%5D%2Cy%3D%5B%5D%3B%20%0D%0A%24(%22bb%22).onmousedown%20%3D%20function(e)%7B%20addEventHandler(this%2C%20%22mousemove%22%2C%20Set)%3B%20%7D%20%0D%0A%24(%22bb%22).onmouseout%20%3D%20function(e)%7B%20removeEventHandler(this%2C%20%22mousemove%22%2C%20Set)%3B%20x%3Dy%3D%5B%5D%3B%7D%20%0D%0A%24(%22bb%22).onmouseup%20%3D%20function(e)%7B%20removeEventHandler(this%2C%20%22mousemove%22%2C%20Set)%3B%20oSlippage2.SetPosition(x%2C%20y)%3Bx%3Dy%3D%5B%5D%3B%7D%20%0D%0Afunction%20Set(e)%7B%20var%20oEvent%20%3D%20Event(e)%3B%20x.push(oEvent.pageX)%3B%20y.push(oEvent.pageY)%3B%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%3C%2Fscript%3E"> </head> <body> 自动滑移: <div id="cc" style="height:200px; width:500px; border:1px solid #000000; position:relative;overflow:hidden;"> <div id="idSlippage3" style="width:10px; height:10px; background:#000000; position:absolute; z-index:99; top:50px; left:50px;"> </div> </div> 定点滑移:（鼠标点击） <div id="aa" style="height:200px; width:500px; border:1px solid #000000; overflow:hidden;"> <div id="idSlippage" style="width:10px; height:10px; background:#000000; position:absolute; z-index:99; top:-50px; left:50px;"> </div> </div> 定线滑移:（鼠标拖动轨迹） <div id="bb" style="height:200px; width:500px; border:1px solid #000000; overflow:hidden;"> <div id="idSlippage2" style="width:10px; height:10px; background:#000000; position:absolute; z-index:99; top:-50px; left:50px;"> </div> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程