首页 > 互联资讯 > 网络资讯  > 

jQuery背景墙聚光灯效果(jQuery带进度条带标题左右箭头渐变幻灯片)

jQuery背景墙聚光灯效果(jQuery带进度条带标题左右箭头渐变幻灯片)
一款jQuery实现的图片墙上实现聚光灯效果，随着鼠标的移动而突显某张图片或照片。

jQuery背景墙聚光灯效果可以通过使用jQuery和CSS实现。以下是一个示例代码：

<!DOCTYPE html><html><head>
    <title>jQuery背景墙聚光灯效果</title>
    <style>
        .container {            width: 100%;            height: 400px;            position: relative;            overflow: hidden;
        }        .background {            width: 100%;            height: 100%;            background-image: url(background.jpg);            background-size: cover;            background-position: center center;            position: absolute;            top: 0;            left: 0;            z-index: -1;
        }        .spotlight {            width: 200px;            height: 200px;            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%, -50%);            border-radius: 50%;            box-shadow: 0 0 100px rgba(0, 0, 0, 0.6);            animation: spotlight-animation 5s infinite;
        }        @keyframes spotlight-animation {            0% {                transform: translate(-50%, -50%) scale(0.2);                opacity: 0.5;
            }            50% {                transform: translate(-50%, -50%) scale(1.2);                opacity: 0.1;
            }            100% {                transform: translate(-50%, -50%) scale(0.2);                opacity: 0.5;
            }
        }    </style></head><body>
    <div class="container">
        <div class="background"></div>
        <div class="spotlight"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function() {            var container = $(".container");            var spotlight = $(".spotlight");

            container.on("mousemove", function(e) {                var posX = e.pageX - container.offset().left;                var posY = e.pageY - container.offset().top;

                spotlight.css({                    "top": posY,                    "left": posX
                });
            });
        });    </script></body></html>

在上述示例代码中，我们创建了一个容器（.container），其中包含了一个背景图（.background）和一个聚光灯效果的元素（.spotlight）。通过使用CSS的animation属性，我们定义了一个名为spotlight-animation的动画，实现了聚光灯效果。

通过jQuery的mousemove事件，我们可以获取鼠标在容器中的位置，并将聚光灯元素（.spotlight）的位置设置为鼠标位置，从而实现了随鼠标移动的聚光灯效果。

您可以根据需要自行替换背景图（background.jpg）和调整聚光灯元素（.spotlight）的大小和样式。

请注意，示例代码中引用了jQuery库，所以在使用之前请确保已引入正确的jQuery库文件


jQuery带进度条带标题左右箭头渐变幻灯片，jquery宽屏唯美滑动式幻灯片，jquery类似智能手机可滑动的图片导航，jQuery横向跳动导航菜单，

jQuery背景墙聚光灯效果(jQuery带进度条带标题左右箭头渐变幻灯片)由讯客互联网络资讯栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“jQuery背景墙聚光灯效果(jQuery带进度条带标题左右箭头渐变幻灯片)”

推荐文章