ajax-簡單參數方法實現陰影效果
阿新 • • 發佈：2018-07-05
abs ces append 簡單 osi fun ready one off
註：
簡單參數
（按照參數的數量和位置傳遞參數）
使用時按照位置、數量傳遞
shadow.js函數
//簡單參數實現方式
/*
* slices:陰影
* opacity:透明度
* zIndex:層級
* */
jQuery.fn.shadow_simple = function (slices,opacity,zIndex) {
//獲取到每個已封裝的元素
//this表示jQuery對象
this.each(function () {
$obj = $(this);//將遍歷出來的元素轉換成jQuery對象
//更改i的值：10 20都可以，能夠改變陰影效果
for (var i = 0; i <slices; i++) {
var $newObj = $obj.clone();//克隆出來5個新的對象
//確定元素的位置。使用絕對定位，設置top和left的值偏移量大小決定最終的陰影位置
$newObj.css({
position: "absolute",
top: $obj.offset().top + i,
left: $obj.offset().left + i,
zIndex: zIndex,
margin: 0,
opacity: 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);//調用簡單參數實現效果,用戶自己傳遞參數
});
</script>
</head>
<body>
<h1>Hello My Name Is Anny</h1>
</body>
</html>
ajax-簡單參數方法實現陰影效果