JavaScript滑移效果代码

更新时间：2008年09月15日 11:02:23 作者：

这里说的滑移其实就是减速效果，能根据设定的坐标平面移动。

代码：

<!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> <script type="text/javascript"> var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; function Event(e){ var oEvent = document.all ? window.event : e; if (document.all) { oEvent.pageX = oEvent.clientX + document.documentElement.scrollLeft; oEvent.pageY = oEvent.clientY + document.documentElement.scrollTop; } return oEvent; } function addEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; } }; function removeEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType, fnHandler, false); } else if (oTarget.detachEvent) { oTarget.detachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = null; } }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var Slippage = Class.create(); Slippage.prototype = { initialize: function(obj, options) { this.obj = $(obj); this._timer =null; this._xs = this._ys = []; this.X = parseInt(this.obj.style.left) || 0; this.Y = parseInt(this.obj.style.top) || 0; this.SetOptions(options); this.Step = Math.abs(this.options.Step); this.Time = Math.abs(this.options.Time); this.Loop = this.options.Loop; this.Relative = this.options.Relative; this.SetPosition(this.options.X || [], this.options.Y || []); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Step: 10,//滑动变化率 Time: 10,//滑动延时 X: [],//x坐标变化 Y: [],//y坐标变化 Loop: false,//是否循环 Relative: true//是否相对位置 }; Object.extend(this.options, options || {}); }, // SetPosition: function(arrX, arrY) { if(arrX.length <= 0 && arrX.length <= 0) return false; else if(arrX.length <= 0) arrX = [0]; else if(arrY.length <= 0) arrY = [0]; this._xs = arrX; this._ys = arrY; if(this.Relative){ for(var i in this._xs){ if (i == 0) { this._xs[0] += this.X; } else { this._xs[i] += this._xs[i-1]; } } for(var i in this._ys){ if (i == 0) { this._ys[0] += this.Y; } else { this._ys[i] += this._ys[i-1]; } } } this.Set(); }, // Set: function() { //当全部坐标指向同一个位置时会进入死循环 if(this._xs.length <= 0 && this._ys.length <= 0) return; if(this._xs.length > 0) this.X = this._xs.shift(); if(this._ys.length > 0) this.Y = this._ys.shift(); if(this.Loop && this._xs.length > 0 && this._ys.length > 0) { this._xs.push(this.X);this._ys.push(this.Y); } //$("aa").innerHTML+=this._ys.length+"="; this.Move(this.X, this.Y); }, // Move: function(iX, iY) { clearTimeout(this._timer); var iLeft = parseInt(this.obj.style.left) || 0, iTop = parseInt(this.obj.style.top) || 0, iLeftStep = this.GetStep(iX, iLeft), iTopStep = this.GetStep(iY, iTop); if (iLeftStep == 0 && iTopStep == 0) { this.Set(); } else { this.obj.style.left = (iLeft + iLeftStep) + "px"; this.obj.style.top = (iTop + iTopStep) + "px"; var oThis = this; this._timer = setTimeout(function(){ oThis.Move(iX, iY); }, this.Time); } }, // GetStep: function(iTarget, iNow) { var iStep = (iTarget - iNow) / this.Step; if (iStep == 0) return 0; if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1); return iStep; } }; window.onload = function(){ new Slippage("idSlippage3", { X: [200,200,0,-200,-100,-100], Y: [0,0,100,-100,100,-100], Loop: true }); var oSlippage = new Slippage("idSlippage"); $("aa").onclick = function(e){ var oEvent = Event(e);oSlippage.Move(oEvent.pageX, oEvent.pageY);} var oSlippage2 = new Slippage("idSlippage2", { Step: 1, Relative: false }),x=[],y=[]; $("bb").onmousedown = function(e){ addEventHandler(this, "mousemove", Set); } $("bb").onmouseout = function(e){ removeEventHandler(this, "mousemove", Set); x=y=[];} $("bb").onmouseup = function(e){ removeEventHandler(this, "mousemove", Set); oSlippage2.SetPosition(x, y);x=y=[];} function Set(e){ var oEvent = Event(e); x.push(oEvent.pageX); y.push(oEvent.pageY); } } </script> </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需再刷新一下页面才能执行]

五个基于JS实现的炫酷登录页面
本文为大家准备了五个基于HTML+CSS+JS实现的酷炫登录页面的示例代码，文中的页面效果都很好看，需要的小伙伴可以参考一下
2022-04-04
多引号嵌套的变量命名的问题
这篇文章主要介绍了多引号嵌套的变量命名的问题,需要的朋友可以参考下
2014-05-05
9个JavaScript评级/投票插件
在访问某个网站或者博客时，如果该站点为用户提供内容的评级或投票功能的话，可以增强用户参与的交互性之外，更可以给用户一种“主人”的亲切感，使得用户可以切实地参与到网站内容的评价体系中来。
2010-01-01
JS实现苹果计算器
这篇文章主要为大家详细介绍了JS实现苹果计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
JavaScript版本迷局介绍
有人说喜欢一个人，没必要了解她的过去，然而想读懂一个人，却需要了解她的过去。
2011-01-01
用户输入密码的强度
用户输入密码的强度...
2006-07-07
JS中const对于复杂类型变量和普通类型变量的区别详解
我们在开发的过程中一定常常发现const关键字定义的简单类型变量不可以改变,但是你如果定义的是一个复杂类型变量（比如对象）的话对里面属性的增删改查是可以的,那这又是为什么呢,接下来就来和小编一起探讨一下吧
2023-11-11
thinkjs 文件上传功能实例代码
ThinkJS 是一款面向未来开发的 Node.js 框架，整合了大量的项目最佳实践，让企业级开发变得如此简单、高效。接下来通过本文给大家分享thinkjs 文件上传功能，需要的朋友参考下吧
2017-11-11
如何解决attachEvent函数时，this指向被绑定的元素的问题？
如何解决attachEvent函数时，this指向被绑定的元素的问题？...
2007-04-04
webpack-bundle-analyzer 插件配置使用方法
webpack-bundle-analyzer 是 webpack 的插件，需要配合 webpack 和 webpack-cli 一起使用，这篇文章主要介绍了webpack-bundle-analyzer 插件配置,需要的朋友可以参考下
2023-02-02