插件描述：这是一款可以快速实现各种阴影效果的jQuery插件。该插件以CSS3 box-shadow为基础，使用者可以通过配置参数快速为元素生成各种投影效果。
jquery.shadow.js
可以快速实现各种阴影效果的jQuery插件。该插件以CSS3 box-shadow为基础，使用者可以通过配置参数快速为元素生成各种投影效果。
使用方法
在页面中引入jquery、jquery.shadow.js以及样式文件jquery.shadow.css。
1 2 3 | <link rel="stylesheet" href="css/jquery.shadow.css" /><script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery.shadow.js"></script> |
HTML结构
例如为一个<div>元素生成阴影效果，HTML结构如下：
1 2 3 | <div class="box standard"> <p>text</p></div> |
初始化插件
在页面DOM元素加载完毕之后，可以通过shadow()方法来初始化该阴影插件。
1 2 3 4 5 6 7 8 9 10 11 | $(document).ready(function() { $('.box.standard').shadow(); $('.box.lifted').shadow('lifted'); $('.box.perspective').shadow('perspective'); $('.box.raised').shadow('raised'); $('.box.sides-vt-1').shadow({type:'sides',sides:'vt-1'}); $('.box.sides-vt-2').shadow({type:'sides',sides:'vt-2'}); $('.box.sides-hz-1').shadow({type:'sides',sides:'hz-1'}); $('.box.sides-hz-2').shadow({type:'sides',sides:'hz-2'}); $('.box.rotated').shadow({type:'rotated',rotate:'-5deg'});}); |
配置参数
该阴影插件有4个可用的配置参数：
| 参数 | 类型 | 默认值 | 描述 |
| type | String | "standart" | 阴影的类型，可以是："standard", "lifted", "perspective", "raised", "sides"。 |
| radius | Integer | 4 | 圆角半径，单位像素。 |
| sides | String | '' | 当类型为"sides"时可用，可取值有：vt-1, vt-2, hz-1, hz-2。 |
| rotate | String | "-3deg" | "transform:rotate"属性的值。 |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 原生JS计算器
- 下一个特效： 自定义视频播放进度条播放按钮时间