jquery鼠标移入图片变亮

jQuery库是一个流行的JavaScript库，它使得开发者能够更容易地操作网页上的元素，在网页中，我们经常需要实现一些交互效果，如鼠标悬停时图片变亮，这可以通过CSS和jQuery的结合来实现。

我们需要在HTML文档中引入jQuery库，可以通过以下代码添加一个指向jQuery CDN的引用：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

接下来，我们将创建一个简单的HTML结构，包括一张图片和一个div容器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery鼠标移入图片变亮</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="image-container">
        <img src="your-image.jpg" alt="示例图片" id="brighten-image">
    </div>
    <script>
        // jQuery代码将在这里添加
    </script>
</body>
</html>

现在，我们需要添加一些CSS来定义图片的默认状态和鼠标悬停时的状态，我们将添加一个类image-container来包裹图片，并为其设置一些基本样式：

<style>
    .image-container {
        width: 300px;
        height: 200px;
        position: relative;
        overflow: hidden;
    }
    #brighten-image {
        width: 100%;
        height: auto;
        transition: filter 0.3s ease-in-out;
    }
    #brighten-image:hover {
        filter: brightness(1.2);
    }
</style>

接下来，我们将使用jQuery来实现鼠标悬停时图片变亮的效果，我们将监听mouseenter和mouseleave事件，并相应地调整图片的亮度：

<script>
    $(document).ready(function() {
        $('#brighten-image').mouseenter(function() {
            $(this).css('filter', 'brightness(1.2)');
        });
        $('#brighten-image').mouseleave(function() {
            $(this).css('filter', 'brightness(1)');
        });
    });
</script>

这段代码首先等待文档加载完成，然后为#brighten-image元素添加mouseenter和mouseleave事件监听器，当鼠标移入图片时，图片的亮度会增加20%，而当鼠标移出图片时，图片的亮度会恢复到原始状态。

为了提高性能，我们可以使用CSS的transition属性来平滑地过渡亮度变化，而不是使用jQuery的css方法：

<script>
    $(document).ready(function() {
        $('#brighten-image').mouseenter(function() {
            $(this).addClass('brighten');
        });
        $('#brighten-image').mouseleave(function() {
            $(this).removeClass('brighten');
        });
    });
</script>

我们需要在CSS中添加相应的类：

<style>
    /* 其他CSS代码 */
    #brighten-image.brighten {
        filter: brightness(1.2);
        transition: filter 0.3s ease-in-out;
    }
</style>

现在，当鼠标悬停在图片上时，图片会变亮，而当鼠标移出图片时，图片会恢复到原始亮度，这种方法利用了jQuery的事件处理能力和CSS的过渡效果，实现了一个简单而优雅的交互效果。

正文

jquery鼠标移入图片变亮

相关阅读

引入jqueryjs的顺序

jquery购物车table

jquery.cycle2.min.js

jquery中节点怎么理解

发表评论取消回复

还没有评论，来说两句吧...

目录[+]