注：通过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>