软件开发培训班 >> 编程开发 >> JavaScript

js 弹簧效果代码

　　本文标签：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>javascript弹簧效果</title> 
<script type="text/javascript"> 
var $ = function (id) { 
return "string" == typeof id ? document.getElementById(id) : id; 
};

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

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 Bounce = Class.create(); 
Bounce.prototype = { 
//容器对象,滑动对象,原始位置,移动范围 
initialize: function(container, obj, iOrigin, iRange, options) { 
     
    this._obj = $(obj);//滑动对象 
    this._xo = parseInt(iOrigin);//中轴坐标(即原来坐标) 
    this._xt = 0;//目标坐标 
    this._xs = [];//目标坐标集合 
    this._steps = [];//步长集合 
    this._fast = true;//是否加速 
     
    this.Range = iRange || 0;//滑动范围(宽度) 
     
    this.SetOptions(options); 
     
    this.Step = parseInt(this.options.Step); 
    this.Time = parseInt(this.options.Time); 
    this.Zoom = parseInt(this.options.Zoom); 
    this.Reduce = !!this.options.Reduce; 
    this.Min = parseInt(this.options.Min); 
    this.Max = parseInt(this.options.Max); 
    this.onMin = this.options.onMin; 
    this.onMax = this.options.onMax; 
    this.onSide = this.options.onSide; 
     
    //样式设置 
    $(container).style.position = "relative";     
    this._obj.style.position = "absolute"; 
    this._obj.style.left = this._xo + "px"; 
     
    if(this.Range > 0) this.Start(); 
}, 
//设置默认属性 
SetOptions: function(options) { 
this.options = {//默认值 
        Step:        10,//滑动变化率 
        Time:        10,//滑动延时 
        Zoom:        0,//缩放变化率 
        Reduce:        true,//是否缩小 
        Min:        0,//最小范围 
        Max:        0,//最大范围 
        onMin:        function(){},//到达最小时执行 
        onMax:        function(){},//到达最大时执行 
        onSide:        function(){}//到达边界时执行 
}; 
Object.extend(this.options, options || {}); 
}, 
//从轴点开始 
Start: function(iRange) { 
    clearTimeout(this._timer); 
    //iRange有值的话重新设置滑动范围 
    if(iRange) this.Range = iRange; 
    //是否到了最小点 
    if(this.Reduce && (this.Range <= 0 || this.Range <= this.Min)) { this.onMin(); return; } 
    //是否到了最大点 
    if(!this.Reduce && (this.Max > 0 && this.Range >= this.Max)) { this.onMax(); return; } 
    //重置位置 
    this._obj.style.left = this._xo + "px"; 
    //设置目标坐标集合(iRange可能会变化所以每次都要设置) 
    this._xs = [this._xo + this.Range, this._xo, this._xo - this.Range, this._xo]; 
    //设置为加速状态 
    this._fast = false; 
    //开始分段移动 
    this.Set(); 
}, 
//从分段开始 
Set: function() { 
    //目标坐标都到达后返回 
    if(this._xs.length <= 0){ 
        //缩放变化率有值的话重新设置范围 
        if(this.Zoom > 0) { this.Range += (this.Reduce ? -1 : 1) * this.Zoom; } 
        this.Start(); return; 
    } 
    //取得目标坐标 
    this._xt = this._xs.shift(); 
    //目标坐标是中轴点说明现在是在边界上 
    if(this._xt == this._xo) this.onSide();     
    //设置步长 
    this.SetStep(); 
    //开始移动 
    this.Move(); 
}, 
//移动 
Move: function() { 
    clearTimeout(this._timer); 
    //步长走完即到达目标坐标就返回 
    if (this._steps.length <= 0) { this.Set(); return; } 
    //执行移动 
    this._obj.style.left = (parseInt(this._obj.style.left) + this._steps.shift()) + "px"; 
    //循环移动 
    var oThis = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); 
}, 
//设置步长 
SetStep: function() { 
    var iTemp = parseInt(this._obj.style.left); 
     
    //注意是从大到小排的 
    this._steps = []; 
     
    if(this.Step >= 1){ 
        var i = 0; 
        do{ 
            i = (this._xt - iTemp) / this.Step; 
            //步长不能包含0 
            if (i == 0) { break; } else if (Math.abs(i) < 1) { i = i > 0 ? 1 : -1; } 
            this._steps.push(i = parseInt(i)); 
            iTemp += i; 
        } while (true); 
        //如果是加速的话反转步长集合 
        if(this._fast) this._steps.reverse(); 
    } 
    //加速减速是交替进行的所以每次都要取反 
    this._fast = !this._fast; 
} 
};

window.onload=function(){ 
    new Bounce("idContainer", "idBounce", 250, 200); 
     
    var o = new Bounce("idContainer1", "idBounce1", 250, 200, { 
        Zoom: 20, Max: 200, 
        onMax: function(){ o.Reduce = true; o.Start(200); }, 
        onMin: function(){ o.Reduce = false; o.Start(0); } 
    });

var o2 = new Bounce("idContainer2", "idBounce2", 250); 
    $("bb").onclick = function(){ o2.Start(parseInt($("aa").value) || 200); } 
    $("idFast").onclick = function(){ if(--o2.Step<2){o2.Step=2} } 
    $("idSlow").onclick = function(){ if(++o2.Step>20){o2.Step=20} } 
    $("idZoom").onclick = function(){ o2.Zoom=50; } 
} 
</script> 
</head> 
<body>

<style type="text/css"> 
.container{border:1px solid #000000;height:50px; width:500px;} 
.bounce{width:10px; height:10px; background:#000000;top:20px;} 
</style> 
固定范围反弹： 
<div id="idContainer" class="container"> 
<div id="idBounce" class="bounce"> </div> 
</div>

范围渐变反弹： 
<div id="idContainer1" class="container"> 
<div id="idBounce1" class="bounce"> </div> 
</div>

自定范围反弹： 
<div id="idContainer2" class="container"> 
<div id="idBounce2" class="bounce"> </div> 
</div>

范围： 
<input id="aa" name="" type="text" value="200" size="8" /> 
<input id="bb" name="" type="button" value=" 开始 " /> 
<input id="idFast" name="" type="button" value=" 加速 + " /> 
<input id="idSlow" name="" type="button" value=" 减速 - " /> 
<input id="idZoom" name="" type="button" value=" 渐 小 " />

</body> 
</html>

技术文章快速查找

Jquery遍历节点的方法小集

javascript 打字效果的文字特效

JavaScript定义类或函数的几种方式小结

解析Jquery的LigerUI如何实现文件上传

手机平板等移动端适配跳转URL的js代码

button没写type=button会导致点击时提交

js 幻灯片的实现

jQuery获取选中内容及设置元素属性的方法

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建