专栏首页前端知识分享第25天:js-封装函数-淘宝鼠标展示

第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>

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第26天:js-$id函数、焦点事件

    一、函数return语句 定义函数的返回值,在函数内部用return来设置返回值,一个函数只能有一个返回值。同时,终止代码的执行。 所有自定义函数默认没有返回值...

    半指温柔乐
  • todomvc-app

    半指温柔乐
  • 第69天:jQuery入口函数

    Js方式 :document.getElementById(“id”).onclick

    半指温柔乐
  • hihoCoder 1317 搜索四·跳舞链(DLX算法)

    题目链接:http://hihocoder.com/problemset/problem/1317

    Ch_Zaqdt
  • PAT--L2-020. 功夫传人

    题目链接:https://www.patest.cn/contests/gplt/L2-020

    指点
  • centos删除evolution后黑屏

    本文由腾讯云+社区自动同步,原文地址 http://blogtest.stackoverflow.club/evolution-gnome-gdm-centos...

    羽翰尘
  • 动植物基因组大小粗略比较

    在知乎看到问题 为什么植物基因组比动物基因组大(为什么植物基因组似乎比脊椎动物拥有更多的基因?)? 印象里好像也不一定,因为拟南芥的基因组也才100多M,自己之...

    用户7010445
  • 我是如何成为一个JavaWeb开发者的

      你应该也知道所谓的“全栈”Java开发人员。这是个人的技能集合。一个完整的全栈开发者应该同样胜任前端开发和后端开发的工作。这可能是难度系数最高的一条路了,因...

    哲洛不闹
  • MySQL数据库1初识MySQL

    MySQL软件官方下载地址(https://dev.mysql.com/downloads/mysql/),个人感觉下载压缩包版比下载安装包办的要好,因为安装包...

    GH
  • 我是如何成为一个JavaWeb开发者的

      你应该也知道所谓的“全栈”Java开发人员。这是个人的技能集合。一个完整的全栈开发者应该同样胜任前端开发和后端开发的工作。这可能是难度系数最高的一条路了,因...

    哲洛不闹

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动