封装函数：
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>运行效果：
第25天：js-封装函数-淘宝鼠标展示
原文地址：http://www.cnblogs.com/le220/p/7492442.html