几种方块滑动效果

稿源：互联网 2022-04-02 21:43:20 点击： 2380 撤稿纠错

有几款滑动特效，按轨迹滑动、跟随鼠标滑动、鼠标感应滑动等。

以下讨论的是和滑动相关的几种方块滑动效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<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;
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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);
    }
  }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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); }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

自动滑移：
<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://js.alixixi.com/a/2010091564652.shtml方便下次再访问哦。

·上一篇： 逼真抽奖效果
·下一篇： 兼容各种浏览器圆角矩形

几种方块滑动效果

文章分类LIST >>返回首页

最新游戏

最新新闻