純js模擬div層彈性運動的方法
更新時間：2015年07月27日 12:55:55 作者：西西愛OS
這篇文章主要介紹了純js模擬div層彈性運動的方法,涉及javascript操作div層實現(xiàn)運動的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了純js模擬div層彈性運動的方法。分享給大家供大家參考。具體如下：
特性：
1. 支持各項常數(shù)自定義
2. 理論支持所有元素，只需修改style.width，你懂得
3. 已知支持瀏覽器：chrome/firefox/IE7、8、9
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<script type="text/javascript">
var a=900;//最大距離
var b;//定時器變量
var c=-1;//下次點擊運動方向 -1負向運動 1正向運動
var d=2; //反彈常量 數(shù)值越大彈性越小 取值d>1
var e=-1; //當(dāng)前運動方向
var f=a; //當(dāng)前位置
var g=0; //已單向運動時間
var h; //彈性體
var i=15;//運動速度 數(shù)值越大，運動越慢
function Bounce(id){
h=document.getElementById(id);
//終止未完成的運動
if(b)clearInterval(b);
//重置時間
g=0;
c=-1*c; //下次點擊運動方向改變
b=setInterval('move()',i);
}
function move(){
if(c==1){
if(e==-1){
if(f-(2*g-1)>0){
f=f-(2*g-1);
g++;
}else{
e=1;
f=1;
g++;
g=parseInt(g/d);
g=g%2==0?(g+1):g;
if(g==3)clearInterval(b);
}
}else{
if(g>0){
g--;
f=f+2*g-1;
}else{
e=-1;
g=0;
}
}
h.style.width=f.toString()+"px";
}else{
if(e==1){
if(f+(2*g-1)<a){
f=f+(2*g-1);
g++;
}else{
e=-1;
f=a;
g++;
g=parseInt(g/d);
g=g%2==0?(g+1):g;
if(g==1)clearInterval(b);
}
}else{
if(g>0){
g--;
f=f-(2*g-1);
}else{
e=1;
g=0;
}
}
h.style.width=f.toString()+"px";
}
}
</script>
</head>
<body>
<div style="color:red;font-size:12px;text-align:center;">
<div style="text-align:left;color:green;margin:50px 300px;">
特性：<br> * 支持各項常數(shù)自定義 <br> * 理論支持所有元素，只需修改style.width，你懂得<br> * 已知支持瀏覽器：chrome/firefox/IE7、8、9
</div>
</div>
<input type="button" value="click me" onClick="Bounce('test');" style="text-align:center;border:1px #ccc solid;padding:5px 10px;margin:0px 200px 100px 200px;"/>
<div style="width:900px;height:200px;margin:0px 200px;background-color:#e8e8e8;border:1px #ccc solid;" id="test" onClick="Bounce('test');"></div>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
對字符串進行HTML編碼和解碼的JavaScript函數(shù)
對字符串進行HTML編碼和解碼的JS函數(shù)，記下了方便以后找 :)2010-02-02
在做項目時碰到了要在頁面上顯示一個浮動DIV層的效果。本來做的是在頁面居中時顯示的，但后來經(jīng)過自己的測試發(fā)現(xiàn)，當(dāng)網(wǎng)頁中出現(xiàn)了滾動條之后，那個浮動的DIV卻還是在頁面的頂部顯示的2012-01-01
這篇文章主要介紹了js限制文本框只能輸入中文的方法,涉及javascript正則匹配及鼠標事件的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下2015-08-08
微信小程序template模板與component組件的區(qū)別和使用詳解
這篇文章主要介紹了微信小程序template模板與component組件的區(qū)別和使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
JS判斷元素是否存在數(shù)組中的5種方式總結(jié)
數(shù)組是我們編程中經(jīng)常使用的的數(shù)據(jù)結(jié)構(gòu)之一,在處理數(shù)組時我們經(jīng)常需要在數(shù)組中查找特定的值,下面這篇文章主要給大家總結(jié)介紹了關(guān)于JS判斷元素是否存在數(shù)組中的5種方式,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了JS簡單獲得節(jié)點元素的方法,結(jié)合實例形式分析了javascript獲取頁面節(jié)點元素及修改元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
淺談JS中的!=、== 、!==、===的用法和區(qū)別
下面小編就為大家?guī)硪黄獪\談JS中的!=、== 、!==、===的用法和區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
JavaScript與ActionScript3兩者的同性與差異性
接觸JavaScript和ActionScript3也有近5年的時間了，它們都是應(yīng)用比較廣泛的腳本語言.接下來通過本文給大家介紹JavaScript與ActionScript3兩者的同性與差異性，感興趣的朋友一起學(xué)習(xí)吧2016-09-09
本文主要介紹了Webpack常見使用配置小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了JS實現(xiàn)控制表格單元格垂直對齊的方法,涉及javascript操作表單元素樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03