第25天：js-封装函数-淘宝鼠标展示

封装函数：

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

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

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>淘宝鼠标展示</title>
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         ul,li{
             list-style: none;
         }
         .box{
             width: 360px;
             height: 70px;
             padding-top: 360px;
             border: 1px solid #f1f1f1;
             margin: 100px auto;
             background: url("images/01big.jpg") no-repeat;

         }
         .box ul{
             border: 1px solid #f1f1f1;
             overflow: hidden;
         }
         .box li{
             float: left;
         }

     </style>
     <script>
         window.onload=function(){
             var box=document.getElementById('box');
             function fn(pic,bg){//封装函数，参数传递
                 var obj=document.getElementById(pic);//变量不能加引号
                 obj.onmouseover=function(){
                     box.style.backgroundImage=bg;
             }
         }
             fn("pic1","url(images/01big.jpg)");//实参
             fn("pic2","url(images/02big.jpg)");
             fn("pic3","url(images/03big.jpg)");
             fn("pic4","url(images/04big.jpg)");
             fn("pic5","url(images/05big.jpg)");
         }

     </script>
 </head>
 <body>
     <div class="box" id="box">
         <ul>
             <li id="pic1" ><img src="data:images/01.jpg" alt=""></li>
             <li id="pic2"><img src="data:images/02.jpg" alt=""></li>
             <li id="pic3"><img src="data:images/03.jpg" alt=""></li>
             <li id="pic4"><img src="data:images/04.jpg" alt=""></li>
             <li id="pic5"><img src="data:images/05.jpg" alt=""></li>
         </ul>
     </div>
 </body>
 </html>

运行效果：