注：通过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. Redis安装完后redis-cli无法使用（redis-cli: command not found）

    之前安装redis后客户端无法使用,即redis-cli执行后报找不到的错误.这主要是安装redis的时候没有把客户端装上,在StackOverFlow上找到了一种只安装redis cli的方法,这里 ...

  2. 使用ENCKEYS方法加密数据

    要使用这种数据加密方法,您需要配置Oracle GoldenGate以生成加密密钥并将密钥存储在本地ENCKEYS文件中.此方法使用的永久密钥只能通过根据使用加密密钥填充ENCKEYS文件中的说明重新 ...

  3. 围在栅栏中的爱WriteUp(附QWE密码加解密脚本）

    题目的链接:http://www.shiyanbar.com/ctf/1917 1.首先题目给出的是摩尔斯电码: 在下面的网站上解密:https://www.cryptool.org/en/cto-c ...

  4. 框架中的导航框架 & position定位

    框架中,通过链接将一个页面显示在另一个框架中:   总框架: <frameset cols="15%,*">   <frame src="xx.html ...

  5. Linux C 读取文件夹下所有文件（包括子文件夹）的文件名【转】

    转自:https://www.cnblogs.com/xudong-bupt/p/3504442.html 本文:http://www.cnblogs.com/xudong-bupt/p/350444 ...

  6. Linux kernel学习-内存管理【转】

    转自:https://zohead.com/archives/linux-kernel-learning-memory-management/ 本文同步自(如浏览不正常请点击跳转):https://z ...

  7. NodeJS基础教程

    关于 本书致力于教会你如何用Node.js来开发应用,过程中会传授你所有所需的“高级”JavaScript知识.本书绝不是一本“Hello World”的教程. 状态 你正在阅读的已经是本书的最终版. ...

  8. oracle 会话 解锁

    背景 这是当年第一次记录博客,当初记录的原因是感觉有些问题很少碰到,碰到有网上寻找一遍,文章很少是正好对症的,折腾半天终于解决了,但是没有记录过程,结果下次碰到又要从来一次.有的问题还极其不好找,or ...

  9. 数字证书及CA的扫盲介绍

    ★ 先说一个通俗的例子 考虑到证书体系的相关知识比较枯燥.晦涩.俺先拿一个通俗的例子来说事儿. ◇ 普通的介绍信 想必大伙儿都听说过介绍信的例子吧?假设 A 公司的张三先生要到 B 公司去拜访,但是 ...

  10. IPFS环境安装

    IPFS是一个分布式的P2P的协议,可能会取代这个http,全球的点都可能存储这个数据 IPFS搭建环境 1.首先是下载节点软件到官网下载windows版本的ipfs节点软件,如果不能访问官网的话,可 ...