JavaScript實現淡入淡出
阿新 • • 發佈：2017-05-30
開始時間 再次 onclick 一個 javascrip star document 得到 org
<!DOCTYPE html>
<html>
<head>
<title>css動畫</title>
</head>
<body>
<script type="text/javascript">
/**
* 將e轉化為相對定位的元素，使之左右“震動”
* 第一個參數可以是元素對象或者元素的id
* 如果第二個參數是函數，以e為參數，他將在動畫結束時調用
* 第三個參數指定e震動的距離，默認是5像素
* 第四個參數指定震動多久，默認是500毫秒
*/
function shake( e , oncomplete , distance , time ){
//句柄參數
if(typeof e === "string")
e = document.getElementById(e);
if(!time)
time=500;
var orginalStyle = e.style.cssText; //保存e的原始style
e.style.position ="relative"; //使e相對定位
var start = (new Date()).getTime(); //註意：動畫的開始時間
animate(); //動畫開始
//函數檢查消耗的時間，並更新e的位置
//如果動畫完成，他將e還原為原始狀態
//否則，它更新e的位置，安排他自身重新運行
function animate(){
var now = (new Date()).getTime(); //得到當前時間
var elapsed = now-start; //從開始依賴消耗了多長時間
var fraction = elapsed/time; //是總時間的幾分之幾
if(fraction < 1 ){ //如果話未完成
//作為動畫完成比例的函數，計算e的x位置
//使用正弦函數將完成比例乘以4pi
//所以，他來回往復兩次
var x = distance*Math.sin(fraction*4*Math.PI);
e.style.left = x+"px";
//在25毫秒後或在總時間的最後嘗試再次運行函數
//目的是為了產生每秒40幀的動畫
setTimeout(animate,Math.min(25,time-elapsed));
}
else{ //否則動畫完成
e.style.cssText = orginalStyle; //恢復原有樣式
if(oncomplete)
oncomplete(e);
}
}
}
/**
* 以毫秒級的時間將e從完全不透明淡出到完全透明
* 在調用函數時，假設e是完全不透明的
* oncomplete是一個可選的函數，以e為參數，它將在動畫結束時調用
* 如果不指定time，默認是500毫秒
* 該函數在IE中不能正常工作，但也可以修改的能工作
* 除了opacity，IE使用非標準的filter屬性
*/
function fadeOut( e , oncomplete , time ){
if( typeof e ==="string")
e = document.getElementById(e);
if(!time)
time = 500;
//使用Math.sqrt作為一個簡單的“緩存函數”來創建動畫
//精巧的非線性，一開始淡出的比較快，然後緩慢了一些
var ease = Math.sqrt;
var start = (new Date()).getTime(); //註意；動畫開始的時間
animate(); //動畫開始
function animate(){
var elapsed = (new Date()).getTime()-start; //消耗的時間
var fraction = elapsed/time; //總時間的幾分之幾
if(fraction < 1) { //如果動畫未完成
var opacity = 1 - ease(fraction); // 計算元素的不透明度
e.style.opacity = String(opacity); //設置在e上
setTimeout(animate,Math.min(25,time-elapsed));
}else{
e.style.opacity = "0";
if(oncomplete) oncomplete(e);
}
}
}
</script>
<button onclick="shake(this,fadeOut)">淡入淡出</button>
</body>
</html>
JavaScript實現淡入淡出