第25天：js-封装函数-淘宝鼠标展示_js封装形参一一对应-优快云博客

本文介绍了一种使用HTML、CSS及JavaScript实现的鼠标悬停显示放大图片效果的方法。通过封装函数的方式，使得图片切换更加灵活高效。适用于电商网站的商品预览等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装函数：

1，函数形参相当于变量，不能加引号。

2，实参要和形参一一对应。

案例：鼠标移到小图上，背景展示相应放大的图片代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>淘宝鼠标展示</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         ul,li{
12             list-style: none;
13         }
14         .box{
15             width: 360px;
16             height: 70px;
17             padding-top: 360px;
18             border: 1px solid #f1f1f1;
19             margin: 100px auto;
20             background: url("images/01big.jpg") no-repeat;
21 
22         }
23         .box ul{
24             border: 1px solid #f1f1f1;
25             overflow: hidden;
26         }
27         .box li{
28             float: left;
29         }
30 
31     </style>
32     <script>
33         window.onload=function(){
34             var box=document.getElementById('box');
35             function fn(pic,bg){//封装函数，参数传递
36                 var obj=document.getElementById(pic);//变量不能加引号
37                 obj.onmouseover=function(){
38                     box.style.backgroundImage=bg;
39             }
40         }
41             fn("pic1","url(images/01big.jpg)");//实参
42             fn("pic2","url(images/02big.jpg)");
43             fn("pic3","url(images/03big.jpg)");
44             fn("pic4","url(images/04big.jpg)");
45             fn("pic5","url(images/05big.jpg)");
46         }
47 
48     </script>
49 </head>
50 <body>
51     <div class="box" id="box">
52         <ul>
53             <li id="pic1" ><img src="images/01.jpg" alt=""></li>
54             <li id="pic2"><img src="images/02.jpg" alt=""></li>
55             <li id="pic3"><img src="images/03.jpg" alt=""></li>
56             <li id="pic4"><img src="images/04.jpg" alt=""></li>
57             <li id="pic5"><img src="images/05.jpg" alt=""></li>
58         </ul>
59     </div>
60 </body>
61 </html>

运行效果：