javascript 45種緩動效果非常酷

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript 45種緩動效果非常酷

編輯：關於JavaScript

參數類型說明 el element 必需，為頁面元素 begin number 必需，開始的位置 change number 必需，要移動的距離 duration number 可選，緩動效果持續時間，默認是500ms。建議取300~1000ms。 field string 必需，要發生變化的樣式屬性。請在top，left，bottom,right，width與height中選擇。 ftp number 可選，每秒進行多少幀動畫，默認50幀，保證流暢播放。一些參考資料，日本動畫1秒36幀，中國卡通24幀，賽車游戲60幀。 ease function 必需，緩動公式，參數為0~1之間的數。可參考我下面給出的45條公式。 onStart function 可選，在開始時執行。 onEnd function 可選，在結束時執行。prototype流派的緩動公式，只需一個參數（增至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> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"></head> 
<body> 
 
 
 
 
 
 
 
<h2>請點擊下表的格子</h2> 
 
 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一頁:JavaScript下通過的XMLHttpRequest發送請求的代碼
下一頁:js 編程筆記無名函數

關於JavaScript

js中復制行和刪除行的操作實例: 復制代碼代碼如下:var validateForm = null; var num =
nodejs中實現路由功能: 初學Node，發現了與自己之前的觀點完全不同的場面——你眼中的JavaScript，是干什麼用的呢？
淺談Javascript中Object與Function對象: 1.Object對象原型對象

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章