ajax-简单参数方法实现阴影效果
生活随笔
收集整理的這篇文章主要介紹了
ajax-简单参数方法实现阴影效果
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
注：
//簡(jiǎn)單參數(shù)實(shí)現(xiàn)方式
/*
* slices:陰影
* opacity:透明度
* zIndex:層級(jí)
* */
jQuery.fn.shadow_simple = function (slices,opacity,zIndex) {
//獲取到每個(gè)已封裝的元素
//this表示jQuery對(duì)象
this.each(function () {
$obj = $(this);//將遍歷出來(lái)的元素轉(zhuǎn)換成jQuery對(duì)象
//更改i的值：10 20都可以，能夠改變陰影效果
for (var i = 0; i <slices; i++) {
var $newObj = $obj.clone();//克隆出來(lái)5個(gè)新的對(duì)象
//確定元素的位置。使用絕對(duì)定位，設(shè)置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();//調(diào)用對(duì)象方法的效果
$("h1").shadow_simple(7,0.3,-1);//調(diào)用簡(jiǎn)單參數(shù)實(shí)現(xiàn)效果,用戶(hù)自己傳遞參數(shù)
});
</script>
</head>
<body>
<h1>Hello My Name Is Anny</h1>
</body>
</html>
簡(jiǎn)單參數(shù)
（按照參數(shù)的數(shù)量和位置傳遞參數(shù)）
使用時(shí)按照位置、數(shù)量傳遞
//簡(jiǎn)單參數(shù)實(shí)現(xiàn)方式
/*
* slices:陰影
* opacity:透明度
* zIndex:層級(jí)
* */
jQuery.fn.shadow_simple = function (slices,opacity,zIndex) {
//獲取到每個(gè)已封裝的元素
//this表示jQuery對(duì)象
this.each(function () {
$obj = $(this);//將遍歷出來(lái)的元素轉(zhuǎn)換成jQuery對(duì)象
//更改i的值：10 20都可以，能夠改變陰影效果
for (var i = 0; i <slices; i++) {
var $newObj = $obj.clone();//克隆出來(lái)5個(gè)新的對(duì)象
//確定元素的位置。使用絕對(duì)定位，設(shè)置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();//調(diào)用對(duì)象方法的效果
$("h1").shadow_simple(7,0.3,-1);//調(diào)用簡(jiǎn)單參數(shù)實(shí)現(xiàn)效果,用戶(hù)自己傳遞參數(shù)
});
</script>
</head>
<body>
<h1>Hello My Name Is Anny</h1>
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/LindaBlog/p/9266584.html
總結(jié)
以上是生活随笔為你收集整理的ajax-简单参数方法实现阴影效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 东南大学课程表爬虫
- 下一篇： IT增值服务实践心得体会:企业客户的钱比