验证中...
图片淡入淡出
原始数据 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img</title>
</head>
<body>
<img src="TB1ymxDXTtYBeNjy1XdXXXXyVXa-1190-410.jpg" alt="解忧杂货店" style="opacity:0.3;filter:alpha(opacity:30);">
<!-- 样式需写为内联样式 -->
<script>
var alpha = 30;//定义一个变量来存当前的透明度
//获取图片元素
var img = document.getElementsByTagName("img")[0];
var timer = null;//设置一个变量存定时器
//定义一个渐变函数
var start = function(target){
var speed = 0;
clearInterval(timer);//保证每次只开启一个定时器
timer = setInterval(function(){
if(alpha<target){
speed = 5;
}else{
speed = -5;
}
if(alpha == target){
clearInterval(timer);
}else{
if(img.style.opacity){
alpha = alpha + speed;
img.style.opacity = alpha/100;
}else{
alpha = alpha + speed
img.style.filter = "alpha(opacity=" + alpha +")";
}
}
},30)
}
window.onload = function(){
img.onmouseover = function(){
start(100);
}
img.onmouseout= function(){
start(30);
}
}
</script>
</body>
</html>

评论列表( 0 )

你可以在登录后,对此项目发表评论

6_float_left_people 6_float_left_close