快捷導(dǎo)航

javascript 45種緩動效果非常酷

更新時間：2011年06月28日 22:48:16 作者：

javascript 45種緩動效果非常酷,喜歡的朋友運(yùn)行下看下效果。

參數(shù)	類型	說明
el	element	必需，為頁面元素
begin	number	必需，開始的位置
change	number	必需，要移動的距離
duration	number	可選，緩動效果持續(xù)時間，默認(rèn)是500ms。建議取300~1000ms。
field	string	必需，要發(fā)生變化的樣式屬性。請在top，left，bottom,right，width與height中選擇。
ftp	number	可選，每秒進(jìn)行多少幀動畫，默認(rèn)50幀，保證流暢播放。一些參考資料，日本動畫1秒36幀，中國卡通24幀，賽車游戲60幀。
ease	function	必需，緩動公式，參數(shù)為0~1之間的數(shù)。可參考我下面給出的45條公式。
onStart	function	可選，在開始時執(zhí)行。
onEnd	function	可選，在結(jié)束時執(zhí)行。

prototype流派的緩動公式，只需一個參數(shù)（增至45種）

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <style type="text/css"> .taxiway{ width:800px; height:100px; background:#E8E8FF; } .move{ width:100px; height:100px; background:#a9ea00; } #panel { float:left; width:810px } #panel div{ float:left; width:88px; border:1px solid #333; height:20px; font-size:11px; } div.transition { margin-top: 30px; width: 200px; height: 200px; position: relative; margin-bottom:10px; } div.transition div { position: absolute; height: 1px; width: 1px; background: #000; } div.transition span { display: block; position: absolute; border-bottom: 1px solid #dadada; font-size: 10px; color: #888; width: 200px; left: 0px; } div.transition div#indicator { position:absolute; background-color:#a9ea00; height: 200px; top: 0px; left: 0px; } div.transition div#marker { background-color: #f00; height: 6px; width: 6px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; left: 0px; margin-bottom: -3px; margin-left: -3px; } div.transition div#label { background: transparent; color: #ABD474; font-size: 20px; height: 20px; width: 200px; text-align: center; top: 80px; left: 0px; z-index: -1; } </style>  <title>緩動BY司徒正美</title> </head> <body> <div   id="vvxyksv9kd"   class="taxiway"> <div   id="vvxyksv9kd"   class="move" onclick="transition(this,{field:'left',begin:parseFloat(getCoords(this).left),change:700,ease:tween.bouncePast})"></div> </div> <div   id="vvxyksv9kd"   class="taxiway"> <div   id="vvxyksv9kd"   class="move" onclick="transition(this,{field:'width',begin:parseFloat(getStyle(this,'width')),change:300,ease:tween.spring})"></div> </div> <span id="vvxyksv9kd"    class="clear"></span> <h2>請點(diǎn)擊下表的格子</h2> <div   class="vvxyksv9kd"   id="transition" class="transition"> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: