注：通过json对象的方式传递参数，参数具体信息由json对象来封装，参数封装到对象中再进行映射（参数映射）

shadow.js

//使用参数映射方式实现参数设置
/* option:参数对象，封装所有参数信息
 * option.slices：阴影
 * option.opacity:透明度
 * option.zIndex:层级
 * */
jQuery.fn.shadow_map = function (option) {
    //获取到每个已封装的元素
    //this表示jQuery对象
    this.each(function () {
        $obj = $(this);//将遍历出来的元素转换成jQuery对象
        //更改i的值：10 20都可以，能够改变阴影效果
        for (var i = 0; i <option.slices; i++) {
            var $newObj = $obj.clone();//克隆出来5个新的对象
            //确定元素的位置。使用绝对定位，设置top和left的值偏移量大小决定最终的阴影位置
            $newObj.css({
                position: "absolute",
                top: $obj.offset().top + i,
                left: $obj.offset().left + i,
                zIndex: option.zIndex,//层级并没有太大关系，
                margin: 0,
                opacity: option.opacity
            }).appendTo("body");
        }
    });
}

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/shadow.js"></script>
    <script>
        $(document).ready(function(){
//           $("h1").shadow();//调用对象方法的效果
//            $("h1").shadow_simple(7,0.3,-1);//调用简单参数实现效果,Y用户自己传递参数
//            $("h1").shadow_map(10,0.5,-1);//这样直接传递参数是不会识别的,因为这样无法识别到它的属性
            $("h1").shadow_map({
                slices:10,
                opacity:0.5,
                zIndex:-1
            });
        });
    </script>
</head>
<body>
<h1>Hello My Name Is Anny</h1>
</body>
</html>

ajax--参数映射方式实现阴影效果的更多相关文章

  1. JQuery中的AJAX参数详细介绍

    Jquery中AJAX参数详细介绍 参数名 类型 描述 url String    (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方 ...

  2. 转载 Jquery中AJAX参数详细介绍

    Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ...

  3. jquery $.ajax({});参数详解

    用到过的: type:请求方式,默认 GET: url:请求路径: data:请求参数,类型是String:JSON.stringify({"name":tom,"age ...

  4. ajax参数

    $.ajax({ type: "GET", url: "Login.ashx", dataType: "text", cache: fals ...

  5. Jquery中AJAX参数详细(1)-转

    http://www.cnblogs.com/qiufuwu618/archive/2012/12/20/2826190.html Jquery中AJAX参数详细列表: 参数名 类型 描述 url S ...

  6. Jquery中AJAX参数详细介绍

    Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ...

  7. Jquery ajax 参数 详解

    Jquery ajax 参数主要如下: url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get ...

  8. Django - Ajax - 参数

    一.Jquery实现Ajax url   type   data   success   error  complete  statusCode {% load staticfiles %} < ...

  9. ajax参数补充

    ajax参数补充 contentType 当我们使用form表单提交数据时,有一个enctype属性,默认情况下不写 此时我们提交数据时,会默认将数据以application/x-www-form-u ...

随机推荐

  1. 2018 Multi-University Training Contest 1 杭电多校第一场

    抱着可能杭电的多校1比牛客的多校1更恐怖的想法 看到三道签到题 幸福的都快哭出来了好吗 1001  Maximum Multiple(hdoj 6298) 链接:http://acm.hdu.edu. ...

  2. LwIP Application Developers Manual5---高层协议之DHCP,AUTOIP,SNMP,PPP

    1.前言 本文主要讲述高层协议,包括DHCP 2.DHCP 2.1 从应用的角度看DHCP 你必须确保在编译和链接时使能DHCP,可通过在文件lwipopts.h里面定义LWIP_DHCP选项,该选项 ...

  3. javascript面向对象学习

    1.this指向问题,指向的是当前的方法属于谁,当前的方法属于谁就指向谁!! 例子: oDiv.onclick = function () { this指向的是oDiv,因为这个方法属于oDiv } ...

  4. python3+selenium入门16-窗口截图

    有时候需要把一些浏览器当前窗口截图下来,比如操作抱错的时候.WebDriver类下.get_screenshot_as_file()方法可窗口截图,需要传入一个截图文件名的路径.window要用\\当 ...

  5. DNS解析出现错误故障解决

    当DNS解析出现错误,例如把一个域名解析成一个错误的IP地址,或者根本不知道某个域名对应的IP地址是什么时,就无法通过域名访问相应的站点了,这就是DNS解析故障.出现DNS解析故障最大的症状就是访问站 ...

  6. button 去掉原生边框

    button按钮触发 hover 时,自带边框会显示,尤其是 button 设置圆角时,如图: 解决办法: outline: 0;

  7. lua 中 socket 通信示例

    server.lua #!/usr/bin/lua local socket = require("socket") host, port = "127.0.0.1&qu ...

  8. hadoop客户端如何配置

    Hadoop集群主要是由三部分组成的:主节点.从节点和客户端,即master.slave和client.我们在搭建hadoop集群的时候通常只考虑了主节点和从节点的搭建,却忽略了客户端.当我们搭建完成 ...

  9. 【原创】Linux基础之Shell脚本常用命令

    #!/bin/sh 1 取脚本参数 $# 参数个数$0 当前脚本名$1 第1个参数$n 第n个参数$* 所有参数$@ 所有参数$? 上个命令的状态$$ 当前pid 2 日期 $ dateWed Mar ...

  10. css清除浏览器默认样式

    css清除浏览器默认样式(代替 *{}) 将代码放入 css 文件,使用 link 引入. /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/ ...