鼠标跟随定点滑动效果

Html

Css

自动滑移:

   

定点滑移:（鼠标点击）

   

定线滑移:（鼠标拖动轨迹）

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;
}

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);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

鼠标跟随定点滑动效果



代码描述：点击鼠标或滑动鼠标跟随滚动

点击鼠标或滑动鼠标跟随滚动；定点滑移:（鼠标点击）；定线滑移:（鼠标拖动轨迹）

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

冰封魔戒

相关代码

鼠标跟随定点滑动效果

最新