ajax-简单参数方法实现阴影效果
生活随笔
收集整理的這篇文章主要介紹了
ajax-简单参数方法实现阴影效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
注：
//簡單參數實現方式
/*
* 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>
簡單參數
（按照參數的數量和位置傳遞參數）
使用時按照位置、數量傳遞
//簡單參數實現方式
/*
* 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>
轉載于:https://www.cnblogs.com/LindaBlog/p/9266584.html
總結
以上是生活随笔為你收集整理的ajax-简单参数方法实现阴影效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 东南大学课程表爬虫
- 下一篇： IT增值服务实践心得体会:企业客户的钱比