WEB开发网
开发学院网页设计JavaScript JavaScript 滑移效果 阅读

JavaScript 滑移效果

 2010-09-14 13:16:54 来源:WEB开发网   
核心提示:代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html x

代码:

 <!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>

1 2  下一页

Tags:JavaScript 滑移 效果

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接