第25天：js-封装函数-淘宝鼠标展示
封装函数：
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>运行效果：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-09-07 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读