此案例总结的是鼠标移入框内透明度渐变的效果,使用原生js、jquery与css3 3种方法分别实现。照常下面是效果图:
下面是js的实现代码:
window.onload=function(){
var odiv=document.getElementById("mydiv");
odiv.onmousemove=function(){
startChange(30);
}
odiv.onmouseout=function(){
startChange(100);
}
var odiv=document.getElementById("mydiv");
}
var alpha=30;
var timer=null;
function startChange(iTarget){
clearInterval(timer);
var odiv=document.getElementById("mydiv");
timer=setInterval(function(){
var speed=0;
if(alpha>iTarget){
speed=-10;
}else{
speed=10;
}
if(alpha==iTarget){
clearInterval(timer);
}else{
alpha+=speed;
odiv.style.filter='alpha(opacity:'+alpha+')';
odiv.style.opacity=alpha/100;
}
},30);
}
jquery:
$(function(){
$("#mydiv").mouseover(function(){
console.log(1);
$(this).animate({opacity:0.3},1000);
}).mouseout(function(){
$(this).animate({opacity:1},1000);
});
});
css3
#mydiv:hover{
animation:myfirst 1s;
-moz-animation:myfirst 1s; /* Firefox */
-webkit-animation:myfirst 1s; /* Safari and Chrome */
-o-animation:myfirst 1s; /* Opera */
}
@keyframes myfirst
{
from {opacity:1;}
to {opacity:0.3;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {opacity:1;}
to {opacity:0.3;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {opacity:1;}
to {opacity:0.3;}
}
@-o-keyframes myfirst /* Opera */
{
from {opacity:1;}
to {opacity:0.3;}
}