JavaScript动画效果 opacity 透明度变化

来源：互联网发布：奇迹归来宠物进阶数据编辑：程序博客网时间：2024/05/17 07:04

<style type="text/css">#box {width: 200px;height: 200px;background: red;opacity:0.2;/*这是解决透明度在IE上的兼容问题*/filter:alpha(opacity=20);}</style></head><body><div id="box"></div></body>

<script type="text/javascript">window.onload = function() {var oBox = document.getElementById('box');var timer = null;//声明透明度的变化区间值var speed = 1;//声明透明度的初始值这个变量var chuzhi = 20;//目标函数target 即是移入 的时候让他到达的值（透明度）function change(target) {clearInterval(timer);timer = setInterval(function() {//如果目标的透明度的值大于初始值 就是让他递增 加上去 正数//反之递减 负数if(target > chuzhi) {    speed = 1;   }else{    speed = -1;   }//当他是等于初始值的时候 就清楚定时器if(chuzhi == target) {    clearInterval(timer);   }   else {    chuzhi = chuzhi + speed;  oBox.style.opacity = chuzhi / 100;   //js处 解决IE浏览器的兼容问题 oBox.style.filter = 'alpha(opacity=' + chuzhi + ')';    }}, 30);}//调用函数//鼠标移入时候 是让透明度变到1 oBox.onmouseover = function() {change(100);}//鼠标移入时候 是让透明度变到0.2 初始值oBox.onmouseout = function() {change(20);}}</script>

阅读全文

0 0