溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JS實現的透明度漸變動畫效果。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net JS透明度變化效果</title>
<style>
body{
margin: 0px;
padding: 0px;
}
.redb{
width:200px;
height: 200px;
background: red;
filter:alpha(opacity=30);
opacity: 0.3;
}
</style>
</head>
<body>
<div class="redb" id="opbtn"></div>
<script>
window.onload = function(){
var opDiv = document.getElementById("opbtn");
opDiv.onmouseover = function(){
startMove(100);
}
opDiv.onmouseout = function(){
startMove(30);
}
}
var timer = null;
var alpha = 30;
var speed = 0;
function startMove(opTarget){
clearInterval(timer);
var opDiv = document.getElementById("opbtn");
timer = setInterval(function(){
if(alpha<opTarget){
speed = 10;
}
else if(alpha>opTarget){
speed = -10;
}
if(alpha==opTarget){
clearInterval(timer);
}
else{
alpha += speed;
opDiv.style.opacity = alpha/100;
opDiv.style.filter = 'alpha(opacity='+alpha+')';
}
},100);
}
</script>
</body>
</html>
運行效果：
小結:
1、filter和opacity區別：w3c標準透明度就是opacity,filter只有IE才能用,其他瀏覽器都支持opacity
2、改變透明度時候，不能通過類似offsetLeft的方法獲取透明度值，因此需要單獨創建變量
3、不要忘記將定時器賦值給timer
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript圖形繪制技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
