當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript动画效果之透明度
生活随笔
收集整理的這篇文章主要介紹了
javascript动画效果之透明度
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在css中的filter對應老版本的ie瀏覽器，opacity對應的是其他瀏覽器
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 font-size: 12px; 12 } 13 14 div { 15 width: 200px; 16 height: 200px; 17 background: green; 18 filter: alpha(opacity: 30); 19 opacity: 0.3; 20 } 21 </style> 22 </head> 23 24 <body> 25 <div id="div"> 26 27 </div> 28 29 30 </body> 31 32 </html>js中需要在開始自增和開始自減前清除定時器，否則當鼠標多次移動，則會無限疊加自增和自減
1 <script> 2 function $(id) { 3 return typeof id === "string" ? document.getElementById(id) : id; 4 } 5 6 window.onload = function() { 7 //自定義變量div 8 var div = $("div"); 9 //定義一個定時器timer 10 var timer = null; 11 //定義一個變量用于透明度自增減 12 var alpha = 30; 13 14 //定義一個鼠標移進的事件 15 div.onmouseenter = start; 16 17 //定義一個函數 18 function start() { 19 //當鼠標移動次數過多，會疊加自增，所以需要在開始時，清除定時器 20 clearInterval(timer); 21 //定時器用于自動增加 22 timer = setInterval(show, 30); 23 } 24 25 //自定義函數用于透明度的自動增加 26 function show() { 27 if (alpha < 100) { 28 alpha += 10; 29 //ie瀏覽器 30 div.style.filter = 'alpha(opacity: ' + alpha + ');' 31 //其他瀏覽器 32 div.style.opacity = alpha / 100; 33 } 34 } 35 36 //定義一個鼠標移出事件 37 div.onmouseleave = back; 38 39 //定義一個函數 40 function back() { 41 //當鼠標移動次數過多，會疊加自減，所以需要在開始時，清除定時器 42 clearInterval(timer); 43 //定時器用于自動減少 44 timer = setInterval(clear, 30); 45 } 46 47 //自定義函數用于透明度的自動減少 48 function clear() { 49 if (alpha > 30) { 50 alpha -= 10; 51 //ie瀏覽器 52 div.style.filter = 'alpha(opacity: ' + alpha + ');' 53 //其他瀏覽器 54 div.style.opacity = alpha / 100; 55 } 56 } 57 58 59 } 60 </script>?
轉載于:https://www.cnblogs.com/WhiteM/p/6021870.html
總結
以上是生活随笔為你收集整理的javascript动画效果之透明度的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： logback.xml配置详解
- 下一篇： Spring事务管理Transactio