首页 > 代码库 > 有关网页常见图片淡入淡出的效果的随笔
有关网页常见图片淡入淡出的效果的随笔
网页常见的图片淡入淡出的效果还是比较常见的，在这里，我个人来分享一些自己的一些笔记。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淡入淡出图片效果图</title>
<style type="text/css">
#img1{ filter:alpha(opacity:30); opacity: 0.3; } /* 这里用两种方式表示透明度，主要是考虑浏览器兼容性问题 */
</style>
<script type="text/javascript">
window.onload = function(){
var oImg = document.getElementById("img1");
var alpha = 30; //用一个变量存储透明度，开始时图片本身的透明度也可以表示
oImg.onmouseover = function(){
startMove(100); //鼠标移入时开启函数
}
oImg.onmouseout = function(){
startMove(30);
}
function startMove(iTarget){
var timer = null;
clearInterval(timer); //在开启一个定时器之前，先关闭已经开起的定时器
timer = setInterval(function(){
var speed = 0; //设置透明度变化的速度
if(alpha<iTarget){
speed = 1; //透明度小于目标值，则将变化的速度设为正值
}else{
speed = -1;
}
if(alpha==iTarget){
clearInterval(timer); //如果达到目标透明度，则清除定时器,否则定时器不会消除，没有效果
}else{
alpha+=speed;
oImg.style.filter = ‘alpha(opacity:‘+alpha+‘)‘; //为了兼容IE浏览器
oImg.style.opacity = alpha/100;
document.title = alpha; //主要是为了测试，在标题上显示透明度
}
},30);
}
};
</script>
</head>
<body>
<img id="img1" src="http://www.mamicode.com/img/9.jpg">
</body>
</html>
有关网页常见图片淡入淡出的效果的随笔