分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

ajax-简单参数方法实现阴影效果

发布时间:2023-09-06 02:02责任编辑:董明明关键词:暂无标签
注:

简单参数
????(按照参数的数量和位置传递参数)
??????使用时按照位置、数量传递

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-简单参数方法实现阴影效果

原文地址:https://www.cnblogs.com/LindaBlog/p/9266584.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved