练习：javascript淡入淡出半透明效果

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liubingyjui/p/10222175.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML和JavaScript实现的图片淡入淡出效果。通过调整图片的透明度，当鼠标悬停在图片上时，图片会逐渐变得完全可见；当鼠标移开时，图片又会逐渐恢复到半透明状态。该效果适用于IE8及以上版本的浏览器。

划过无透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出半透明效果</title>
    <style>
        img {width:400px;height:200px;opacity: 0.3;filter:alpha(opacity=30)}
    </style>
</head>
<body>
<img src="images/4.jpg" alt="" id="img">
<script>
    // opacity IE8及以下版本不支持
    var oImg= document.getElementById('img');
    oImg.onmouseover=function(){
        animate(30,100)
    }
    oImg.onmouseout=function(){
        animate(100,30)
    }
    var timer = null;
    function animate(speed,dest){
       //speed初始透明度，dest透明度目标值
        clearInterval(timer);
        timer = setInterval(function(){
            speed<dest?speed+=10:speed-=10;
            if(speed==dest){
                clearInterval(timer);
                timer=null;
            }else {
                oImg.style.opacity=speed/100;
                oImg.style.filter="alpha(opacity:"+speed+")";
            }
        },20)
    }
</script>
</body>
</html>