基于jQuery实现背景图片跟随鼠标左

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-29 08:11:29

　　基于jQuery实现背景图片跟随鼠标左

基于jQuery实现背景图片跟随鼠标左移效果

理解需求

我们要实现的效果是：当鼠标在页面上移动时，背景图片会跟随鼠标的横向移动而产生相应的偏移，从而营造出一种动态的视觉效果。

实现思路

HTML结构:
- 创建一个容器div，作为背景图片的父元素。
- 在容器div内放置一个img标签，作为背景图片。
CSS样式:
- 设置容器div的样式，包括宽高、定位等。
- 设置img标签的样式，包括宽度、高度、定位等。
jQuery交互:
- 监听鼠标移动事件（mousemove）。
- 获取鼠标在页面中的坐标。
- 计算背景图片的偏移量，并通过CSS的background-position属性来设置。

代码实现

HTML

<!DOCTYPE html>
<html>
<head>
  <title>背景图片跟随鼠标</title>
  <style>
    body, html {
      height: 100%;
      margin: 0;
    }
    .container {
      width: 100%;
      height: 100%;
      background-image: url('your_image.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
    }
  </style>
</head>
<body>
  <div class="container"></div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      let container = $('.container');

      $(document).mousemove(function(event) {
        let x = event.pageX;
        let width = container.width();
        let offset = x / width * 100;
        container.css('background-position', offset + '% 50%');
      });
    });
  </script>
</body>
</html>

代码解释

HTML结构:
- container div作为背景图片的容器，设置了background-image、background-size和background-repeat属性。
CSS样式:
- 将body和html的高度设置为100%，确保容器div充满整个页面。
jQuery交互:
- mousemove事件监听鼠标移动。
- pageX获取鼠标在页面中的横坐标。
- 计算偏移量，并通过background-position属性设置背景图片的位置。