注：通过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. Netty实现简单WebSocket服务器

    本文参考<Netty权威指南>├── WebSocketServerHandler.java├── WebSocketServer.java└── wsclient.html packag ...

  2. Linux下查询文件的md5,sha1值

    验证下载下来的文件包是不是一致 ··· 验证md5值 #md5sum filename 验证shal值 #sha1sum filename ···

  3. dubbo源码分析10——服务暴露1_export()方法分析

    ServiceConfig类中的export()方法,是dubbo服务暴露的入口方法,被触发的时机有两个: 1. spring容器初始化完成所有的bean实例后,通过事件机制触发 2. 实现Initi ...

  4. H5混合开发app常用代码

    1.Android与H5互调可以让我们的实现混合开发,至于混合开发就是在一个App中内嵌一个轻量级的浏览器(高性能webkit内核浏览器),一部分原生的功能改为Html 5来开发.然后这个浏览器又封装 ...

  5. Python3学习笔记28-HtmlTestRunner

    HtmlTestRunner是unittest模块下的一个拓展,用来生成测试报告.原生的可以自己找下下载地址,原生的看着比较丑.这次使用的是经过一些大佬优化之后的.具体GitHub地址:https:/ ...

  6. VC显示网页验证码、模拟CSDN网页登录

    摘要:by:koma 这两天,本来想花点时间研究一下QQ空间.农场外挂,于是抓包分析一了下,只可惜,在QQ网页登录时进行了加密处理,可惜我对网页编程一窍不通.有些朋友曾讲过那些是通过JS代码进行加密, ...

  7. daemon.debug hostapd: wlan0: WPA rekeying GTK

    现象描述:client连接上AP后,切换接口(譬如lan口的)模式,静态地址和dhcp模式切换后,一段时间后断开连接,再也连接不上,ap侧日志如下: Wed Nov  8 14:39:31 2017 ...

  8. [C]变量作用域

    函数环境变量作用域 C语言栈环境变量作用域跟JS是类似的. 就是内部函数可以访问外部函数的执行(栈)环境变量. 当访问一个变量时,程序将会查询当前栈环境是否存在这个变量,如果没有,将会往上层栈环境继续 ...

  9. 将list集合转json

    public static class DataHelper { /// /// js 序列化器 /// static JavaScriptSerializer jss = new JavaScrip ...

  10. Solidity函数view,pure,constant的用法

    函数访问权限:public,external,private,internal //子类可以得到父类下面的方法,父类用了public,external的话 pragma solidity ^; con ...