JavaScript实现图片联动与鼠标交互效果

作者：流萤时间：2026-10-24 11:19:41浏览：126

本文介绍如何使用HTML、CSS和JavaScript实现一个简易的购物商城图片展示案例。通过监听鼠标移入和移出事件，动态切换小图的边框样式及大图的显示内容，实现悬停联动效果。

针对正在学习HTML、CSS以及JavaScript的前端开发者，本文分享一个购物商城案例的具体实现过程。

准备工作：

首先需要准备用于页面展示的图片资源，包括小尺寸图片及其对应的大尺寸图片。例如，本案例中使用的小图尺寸为40 x 40像素，大图尺寸为321 x 430像素。

结构分析：

大图显示区域
小图列表区域
整体容器边框区域

效果分析：

当鼠标悬停在某张小图片上时，大图区域会同步显示该图片对应的大图。
鼠标悬停在小图片上时，小图片会显示特定的视觉反馈效果。
当鼠标从图片上移开时，小图片的边框高亮效果随之消失。

使用CSS对整体边框进行样式设置：

对div标签进行样式定义，主要涉及边框属性的配置：


#showdiv{
         width: 342px;
         height: 505px;
         border: solid 1px ;
         border-radius: 10px;
     }

对table标签进行样式定义，要求不显示边框，并设置与顶部的间距：


#ta{
          margin: auto;
          margin-top: 5px;
      }

使用JavaScript实现页面的动态交互效果：

定义鼠标进入时的处理函数：


function operInImg(img,src){
          //设置图片的样式
          img.style.border="solid 1px blue";
          //设置大图的img路径
              //获取大图路径
              var big = document.getElementById("big");
              //设置路径
              big.src=src;               
      }
      function operOutImg(img){
          //设置图片的样式
          img.style.border="";
      }

定义鼠标移出时的处理函数：


function operOutImg(img){
          //设置图片的样式
          img.style.border="";
      }

完整的代码实现如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--声明js代码域-->
    <script>
        //创建函数进行照片的联动和样式设置
        function operInImg(img,src){
            //设置图片的样式
            img.style.border="solid 1px blue";
            //设置大图的img路径
                //获取大图路径
                var big = document.getElementById("big");
                //设置路径
                big.src=src;               
        }
        function operOutImg(img){
            //设置图片的样式
            img.style.border="";
        }


    </script>

    <!---声明css代码域-->
    <style>
        /*设置div样式*/
        #showdiv{
            width: 342px;
            height: 505px;
            border: solid 1px ;
            border-radius: 10px;
        }
        /*设置table样式*/
        #ta{
            margin: auto;
            margin-top: 5px;
        }

    </style>
    <title>taobao</title>
</head>
<body>
     <div id="showdiv">
         <table width ="332px" height = "440px" id="ta">
             <tr height="300px">
                 <td colspan="5"><img src="./images/demo-big.jpg" alt=""  id="big"></td>
             </tr>
             <tr height="40px">
                 <td><img src="./images/demo01.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big01.jpg')" onmouseout="operOutImg(this)"></td>
                 <td><img src="./images/demo02.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big02.jpg')" onmouseout="operOutImg(this)"> </td>
                 <td><img src="./images/demo03.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big03.jpg')" onmouseout="operOutImg(this)"> </td>
                 <td><img src="./images/demo04.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big04.jpg')" onmouseout="operOutImg(this)"> </td>
                 <td><img src="./images/demo05.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big05.jpg')" onmouseout="operOutImg(this)"> </td>
             </tr>
         </table>
     </div>
</body>
</html>

最终运行效果展示：

准备工作：

感谢您的阅读，如有不足之处，欢迎批评指正！

以上就是本文的全部内容，希望能为您的学习提供一定帮助，也欢迎大家继续支持本站。

作者最新文章

JavaScript将图片转换为Base64编码的两种途径

2026-11-05 16:43:05

怎么在 Vue 或 React 项目中正确集成 animate.js

2026-11-05 10:23:38

JS注册事件：addEventListener基础语法与参数详解

2026-11-05 08:44:56

JSP和JS的区别：运行环境与服务端/客户端职责解析

2026-11-04 23:34:36

pdf.js 官方下载地址：GitHub Release 获取预编译包

2026-11-04 23:07:27