注：通过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. TCP通信实现对接硬件发送与接收十六进制数据 & int与byte的转换原理 & java中正负数的表示

    今天收到的一份需求任务是对接硬件,TCP通信,并给出通信端口与数据包格式,如下: 1.首先编写了一个简单的十六进制转byte[]数组与byte[]转换16进制字符串的两个方法,如下: /** * 将十 ...

  2. Linux下tar压缩解压缩命令详解

    tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...

  3. Linux中目录proc/net/dev详解【转】

    转自:https://blog.csdn.net/yzy1103203312/article/details/77848192 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...

  4. Epoll模型【转】

    转自:https://www.cnblogs.com/tianhangzhang/p/5295972.html 相比于select,epoll最大的好处在于它不会随着监听fd数目的增长而降低效率.因为 ...

  5. Awk 命令学习总结、AWk命令系列学习（linux shell)

    AWK基本语法 下面没有提到awk命令怎么使用了,你可以通过 运行:awk –h 查询到所有命令及参数!下面把awk作为一门语言分节介绍. linux awk 内置变量使用介绍   awk语言中,怎么 ...

  6. .net 项目与网站区别

    背景 .net 的又一个杰作,我作为资深开发人员,好久没搞明白两者关系,后来慢慢总算琢磨明白了.在2003和2005的时候,都是用的网站方式,后来见到某同事用的项目方式,当时还很不理解,真是个傻瓜程序 ...

  7. web@css普通布局 , 高级布局 , 布局坑

    1.高级布局<文档流概念>:页面从上至下,块式标签一行一行排列,内联式一行中从左至右排列<BFC规则>:左右位置(左右margin)垂直位置(上下margin)容器内外(互不影 ...

  8. 持续集成之④:GitLab触发jenkins构建项目

    持续集成之④:GitLab触发jenkins构建项目 一:目的为在公司的测试环境当中一旦开发向gitlab仓库提交成功代码,gitlab通知jenkins进行构建项目.代码质量测试然后部署至测试环境, ...

  9. mina使用总结

    1.在会话中获得远程IP和端口 @Override public void messageReceived(IoSession session, Object message) throws Exce ...

  10. Linux之 nginx-redis-virtualenv-mysql

    mysql maraidb相关 .yum安装好,启动 安装: yum install mariadb-server mariadb 启动mabiadb: systemctl start mariadb ...