<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>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
