jQuery实现百度图片移入移出内容提示框上下左右移动的效果

要实现“jQuery实现百度图片移入移出内容提示框上下左右移动的效果”的功能，我们需要使用jQuery的动画效果，包括fadeIn/fadeOut和animate两种方法。

下面是具体的实现步骤：

建立HTML骨架结构：包含图片列表和内容提示框两个部分。

<div class="img-list">
  <img src="" alt="">
  <img src="" alt="">
  <img src="" alt="">
  ...
</div>

<div class="tip-box">
  <p class="title">图片标题</p>
  <p class="desc">图片描述</p>
</div>

使用CSS设置样式，为内容提示框添加背景色、阴影和固定定位，为标题和描述添加样式。

.tip-box {
  width: 200px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .3);
  position: fixed;
  z-index: 999;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.desc {
  font-size: 14px;
  color: #666;
}

编写jQuery代码，实现提示框的显隐和位置移动效果。以下是完整代码：

$(function() {
  var $tipBox = $('.tip-box'); // 获取提示框元素
  $('.img-list img').on('mouseover', function(e) {
    var $this = $(this); // 获取当前鼠标滑过的图片元素
    var left = e.pageX + 20; // 计算提示框左侧位置
    var top = e.pageY - $tipBox.outerHeight() - 20; // 计算提示框顶部位置
    var title = $this.attr('alt'); // 获取图片标题
    var desc = $this.data('desc'); // 获取图片描述
    $tipBox.find('.title').text(title); // 添加标题内容
    $tipBox.find('.desc').text(desc); // 添加描述内容
    $tipBox.hide().stop().fadeIn(); // 显示提示框
    $tipBox.css({ left: left, top: top }); // 移动提示框到计算位置
  }).on('mouseout', function() {
    $tipBox.stop().fadeOut(); // 隐藏提示框
  });
});

对代码进行解释：
首先，通过jQuery选择器获取提示框元素和鼠标滑过的图片元素。
然后，在图片元素上绑定mouseover和mouseout事件，用于显示和隐藏提示框。
在mouseover事件中，计算提示框左侧和顶部的位置，获取图片的标题和描述内容，分别添加到提示框中，并使用fadeIn方法显示提示框，使用css方法移动提示框到计算位置。
在mouseout事件中，使用fadeOut方法隐藏提示框。
示例说明：
代码中使用了外部样式表，因此需要引入jQuery和样式表文件。示例代码中采用CDN引入jQuery。

<head>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

在HTML中的img标签需要设置alt和data-desc属性，分别表示图片的标题和描述，例如：

<img src="img/1.jpg" alt="图片标题" data-desc="图片描述">

示例效果展示：

当鼠标从图片上滑过时，会在图片上方出现一个提示框，显示图片的标题和描述，提示框可以随着鼠标的移动而移动。当鼠标移出图片时，提示框会自动隐藏。

除了以上示例，还可以使用jQuery的animate方法实现提示框的左右移动效果，具体实现方式可以参考下面的代码。

var left = e.pageX + 20; // 计算提示框左侧位置
var top = e.pageY - $tipBox.outerHeight() - 20; // 计算提示框顶部位置
var title = $this.attr('alt'); // 获取图片标题
var desc = $this.data('desc'); // 获取图片描述
$tipBox.find('.title').text(title); // 添加标题内容
$tipBox.find('.desc').text(desc); // 添加描述内容
$tipBox.hide().stop().fadeIn(); // 显示提示框
$tipBox.css({ left: left, top: top }); // 移动提示框到计算位置
// 左右移动动画效果
if (left + $tipBox.outerWidth() > $(window).width()) {
  $tipBox.stop().animate({ left: e.pageX - $tipBox.outerWidth() - 20 }, 200);
} else {
  $tipBox.stop().animate({ left: e.pageX + 20 }, 200);
}

这里计算提示框左侧位置和显示方式与之前相同，但是在后面添加了一个判断，如果提示框右侧超出了浏览器窗口的宽度，就使用animate方法将提示框向左移动到图片的左侧，否则向右移动到图片的右侧。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现百度图片移入移出内容提示框上下左右移动的效果 - Python技术站