php实现渐变透明,JS实现透明度渐变功能

这次给大家带来JS实现透明度渐变功能，JS实现透明度渐变功能的注意事项有哪些，下面就是实战案例，一起来看一下。

JS透明度变化效果

body{

margin: 0px;

padding: 0px;

}

.redb{

width:200px;

height: 200px;

background: red;

filter:alpha(opacity=30);

opacity: 0.3;

}

window.onload = function(){

var opp = document.getElementById("opbtn");

opp.onmouseover = function(){

startMove(100);

}

opp.onmouseout = function(){

startMove(30);

}

}

var timer = null;

var alpha = 30;

var speed = 0;

function startMove(opTarget){

clearInterval(timer);

var opp = document.getElementById("opbtn");

timer = setInterval(function(){

if(alpha

speed = 10;

}

else if(alpha>opTarget){

speed = -10;

}

if(alpha==opTarget){

clearInterval(timer);

}

else{

alpha += speed;

opp.style.opacity = alpha/100;

opp.style.filter = 'alpha(opacity='+alpha+')';

}

},100);

}

小结:

1、filter和opacity区别：w3c标准透明度就是opacity,filter只有IE才能用,其他浏览器都支持opacity

2、改变透明度时候，不能通过类似offsetLeft的方法获取透明度值，因此需要单独创建变量

3、不要忘记将定时器赋值给timer

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：