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 > 滑移效果 </ 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 >

转载于:https://www.cnblogs.com/cloudgamer/archive/2008/05/16/1200705.html

相关资源：数据结构—成绩单生成器