php实现渐变透明,鼠标响应式透明度渐变效果的实现

这次给大家带来鼠标响应式透明度渐变效果的实现，做出鼠标响应式透明度渐变效果的注意事项有哪些，下面就是实战案例，一起来看一下。

本文实例讲述了jQuery实现鼠标响应式透明度渐变动画效果。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

js动画-透明度变化

* {

margin: 0;

padding: 0;

font-family:"微软雅黑"

}

#box{

height:100px;

width:100px;

background-color:#0099CC;

margin-top:200px;

position:relative;

/*透明度变化*/

left:0px;

filter:alpha(opacity:30);

opacity:0.3;

}

span{

display:block;

color:blue;

width:25px;

height:100px;

background-color:#FFFF99;

position:absolute;

left:100px;

}

移动

window.οnlοad=function(){

var p1=document.getElementById("box");

p1.οnmοuseοver=function(){

startMove(100);

}

p1.οnmοuseοut=function(){

startMove(30);

}

}

var timer=null;

var alpha=30;

function startMove(itarget){

clearInterval(timer);

var p1=document.getElementById("box");

timer=setInterval(function(){

var speed=0;

if(alpha>itarget){

speed=-10;

}else{

speed=10;

}

if(alpha==itarget){

clearInterval(timer);

}else{

alpha+=speed;

p1.style.filter="alpha(opacity:"+alpha+")";

p1.style.opacity=alpha/100;

}

},100)

}

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

推荐阅读：