用JQuery改变图片的透明度

最新推荐文章于 2022-08-23 12:33:24 发布

原创最新推荐文章于 2022-08-23 12:33:24 发布 · 3.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html5 #ViewUI

HTML5 同时被 2 个专栏收录

39 篇文章

订阅专栏

JavaScript

19 篇文章

订阅专栏

本文展示了一个使用jQuery实现的示例，通过鼠标悬停事件动态改变<img>标签的透明度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面的例子展示了你如何改变项目的透明度。当鼠标滑过<img>标签时，用hover()函数设置透明度样式。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script text="text/javascript">
        const OUT_OPACITY = 0.4;
        const OVER_OPACITY = 1.0;
        $(function() {
            $("div#miniGallery img").css("opacity", OUT_OPACITY)
                .hover(
                    function () {
                        $(this).animate({opacity:OVER_OPACITY});
                    },
                    function () {
                        $(this).animate({opacity:OUT_OPACITY});
                    }
                );
            });
    </script>
</head>
<body> 
    <div id="miniGallery">
        <img src="http://helpexamples.com/flash/images/image1.jpg" width="150" />
        <img src="http://helpexamples.com/flash/images/image2.jpg" width="150" />
        <img src="http://helpexamples.com/flash/images/image3.jpg" width="150" />
    </div> 
</body>
</html>