注：通过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. P2709 小B的询问（莫队入门）

    题目链接:https://www.luogu.org/problemnew/show/P2709 题目大意:中文题目 具体思路:莫队入门题,按照离线的方式打的,对每一个区间进行分块和编号,如果在同一个 ...

  2. Python问题：'Nonetype' object is not iterable

    参考链接:http://blog.csdn.net/dataspark/article/details/9953225 [解析] 这个错误提示一般发生在将None赋给多个值时. [案例] 定义了如下的 ...

  3. Linux 学大纲

  4. dom解析xml随笔

    1.dom解析jar包准备: dom解析需用到dom4j的jar包,比如我在项目中用到的的是dom4j-1.6.1jar,因为项目用的是MAVEN,所以可直接到maven中央库去搜索相关pom坐标配置 ...

  5. C++ operator（重载操作符） 【转】

    转自:http://www.cnblogs.com/xiangxiaodong/archive/2012/02/12/2348144.html operator是C++的关键字,它和运算符一起使用,表 ...

  6. 【防坑指南】nginx重启后出现[error] open() “/usr/local/var/run/nginx/nginx.pid” failed

    重新启动nginx后,出现报错,原因就是下没有nginx文件夹或没有nginx.pid文件,为什么会没有呢? 原因就是每次重新启动,系统都会自动删除文件,所以解决方式就是更改pid文件存储的位置, 打 ...

  7. Pftriage：分析和追踪恶意文件，识别特征

    项目地址 PFTriage:https://github.com/idiom/pftriage 参考 Pftriage:如何在恶意软件传播过程中对恶意文件进行分析 https://www.freebu ...

  8. python3+selenium入门09-键盘事件

    Keys类提供了键盘上几乎所有按键的方法.通过send_keys()方法不仅可以用来模拟键盘输入,还可以用它来模拟键盘上的按键.包括组合键,比如Ctrl+a等 需要导入Keys类 from selen ...

  9. 设计模式C++学习笔记之八（Adapter适配器模式）

      适配器模式,使用之处比较特殊,不属于常规设计模式,主要用于不同系统之间的处理.是将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工 ...

  10. Linux 网络侦错：无法联机原因分析

    所谓的软件问题,绝大部分就是 IP 参数设定错误啊,路由不对啊,还有 DNS 的 IP 设定错误等等的, 这些问题都是属于软件设定啦!只要将设定改一改,利用一些侦测软件查一查,就知道问题出在哪里了!基 ...