封装函数：

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>

运行效果：

第25天：js-封装函数-淘宝鼠标展示的更多相关文章

  1. 关于Ajax请求的JS封装函数

    每次连接ajax都要重复写很多代码,所以写了一个JS封装函数,如下: 再来解释一下其中obj对象的参数形式: obj={ 'type':提交方式,    get/post 'url' : 提交地址, ...

  2. 第110天：Ajax原生js封装函数

    一.Ajax的实现主要分为四部分: 1.创建Ajax对象 // 创建ajax对象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHtt ...

  3. js 实现仿 淘宝 五星评价 demo

    <style> @font-face { font-family: 'iconfont'; /* project id 247957 */ src: url('//at.alicdn.co ...

  4. js运动 模仿淘宝幻灯

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. js 关于网易淘宝移动端适配的学习

    (function (doc, win) { // orientationchange:用户水平或者垂直翻转设备(即方向发生变化)时触发的事件;(屏幕大小发生变化) var docEl = doc.d ...

  6. 原生js仿淘宝手机购买选项代码

    这是一款基于原生js实现仿淘宝手机信息购买选项效果源码,界面整体效果仿照淘宝购物选项设计,点击不同选项还可实时显示不同的价格计算结果,界面简洁大方.美观实用.可兼容目前最新的各类主流浏览器. 在线演示 ...

  7. JavaScript（Node.js）+ Selenium 实现淘宝抢单

    JavaScript(Node.js)+ Selenium 淘宝抢单 为了买买买我也是拼了,看了一点selenium的资料,随便写的. 程序写的比较烂,但是够我自己用了,望各路大牛指教. 使用说明: ...

  8. 百度，淘宝，腾讯三大巨头HTML页面规范分解

    [兼容html5方案] 百度贴吧,百度图片的实现 <!--[if lt IE 9]> <script> (function(){ var tags = ['header','f ...

  9. 安卓sdk webview获取淘宝个人信息100项，源码。

    1.贴出主要代码.这个不是python,python只涉及了服务端对信息提取结果的接受.主体是java  + android + js.由于淘宝各模块都是二级子域名,不能只在一个页面完成所有请求,aj ...

随机推荐

  1. Docker入门系列01

    前两篇写了 Docker 如何安装和相关的概念,当然概念的东西省略了很多,主要是自己水平有限,所以后期会可能增添.但以上内容都是用别人的建好的 镜像(Image) ,这怎么行,我们应该自己动手造轮子, ...

  2. 打造移动应用与游戏安全防线，腾讯WeTest安全服务全线升级

    当移动互联网渗透到千家万户,与工业控制.智慧交通.实时社交.休闲娱乐紧密结合时,应用安全就变得尤为重要. 尤其在网络强相关的APP流行年代,当APP应用客户端上传与获取信息,大多通过接口在服务器双向通 ...

  3. adb获取设备的序列号

    用数据线连接手机, 打开开发者模式, 并赋予相关权限, 在CMD命令行输入: adb devices 第一个参数即为设备的序列号, 第二个参数device表示设备的状态是在线.

  4. 第二篇 Flask基础篇之（闪现，蓝图，请求扩展，中间件）

    本篇主要内容: 闪现 请求扩展 中间件 蓝图 写装饰器,常用 functools模块,帮助设置函数的元信息 import functools def wrapper(func): @functools ...

  5. Git与远程仓库关联以及关联错误解决方法

    假设你github的用户名是  helloworld  ,你在上面创建了一个 名为 hello 的 repository. 一. 与本地仓库进行关联 1.1用原生ssh进行关联,速度快: git re ...

  6. SpriteKit在复制节点时留了一个巨坑给开发者,需要开发者手动把复制节点的isPaused设置为false

    根据When an overlay node with actions is copied there is currently a SpriteKit bug where the node’s is ...

  7. [CF19B]Checkout Assistant

    题目描述 Bob 来到一家现购自运商店,将 n 件商品放入了他的手推车,然后到收银台 付款.每件商品由它的价格 pi 和收银员扫描它的时间 ti 秒定义.当收银员正在扫 描某件商品时,Bob 可以从他 ...

  8. yarn logs -applicationId命令java版本简单实现

    import java.io.DataInputStream; import java.io.EOFException; import java.io.FileNotFoundException; i ...

  9. 地牢逃脱（BFS（广度优先搜索））

    题目描述 给定一个 n 行 m 列的地牢,其中 '.' 表示可以通行的位置,'X' 表示不可通行的障碍,牛牛从 (x0 , y0 ) 位置出发,遍历这个地牢,和一般的游戏所不同的是,他每一步只能按照一 ...

  10. docker最佳实践-----美团点评的分享

    美团点评容器平台简介 本文介绍美团点评的Docker容器集群管理平台(以下简称“容器平台”).该平台始于2015年,是基于美团云的基础架构和组件而开发的Docker容器集群管理平台.目前该平台为美团点 ...