本文實例講述了js實現透明度漸變效果的方法。分享給大家供大家參考。具體分析如下:
這裡可實現一開始元素的透明度是30,鼠標移上的時候,透明度慢慢增加,到透明度100停止。鼠標移出,透明度慢慢減少,減少到30的效果。
要點一:因為無法直接獲取和改變透明度的值,可以把透明度值賦給一個變量,讓變量變化,最後把變量的值再賦給元素的透明值。
var alpha=30;
要點二:判斷目標值和目前透明值,來判定是正向速度還是負向速度。
if(target > alpha){ speed = 2; }else{ speed = -2; }
要點三:如果透明值達到目標值,關掉定時器,否則透明值繼續變化。最後把值賦給元素,因為透明度有兼容問題,所以要寫上兩個寫法。
if(alpha == target){ clearInterval(timer); } else{ alpha = alpha + speed; run.style.filter = 'alpha(opacity='+alpha+')'; run.style.opacity = alpha/100; document.title = alpha; }
最後,上代碼:
<!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=utf-8"/> <title>無標題文檔</title> <style> body{margin:0; padding:0;} #run{width:100px; height:100px; background:#06c; position:absolute; border:1px solid #000; opacity:0.3; filter:alpha(opacity=30);} </style> <script> window.onload = function(){ var run = document.getElementById("run"); var btn = document.getElementById("btn"); var speed = 1; var timer = null; var alpha=30; run.onmouseover = function(){ startrun(100); } run.onmouseout = function(){ startrun(30); } function startrun(target){ clearInterval(timer); timer = setInterval(function(){ if(target > alpha){ speed = 2; }else{ speed = -2; } if(alpha == target){ clearInterval(timer); } else{ alpha = alpha + speed; run.style.filter = 'alpha(opacity='+alpha+')'; run.style.opacity = alpha/100; document.title = alpha; } },30) } } </script> </head> <body> <div id="run"></div> </body> </html>
希望本文所述對大家的javascript程序設計有所幫助。