当前位置：首页 > 网页特效 > 背景

可快速生成各种阴影效果的jQuery插件

分类：背景日期：2024-05-14 点击(0) 评论(0)

简介

在页面中引入jquery、jquery.shadow.js以及样式文件jquery.shadow.css。

```html
<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结构如下：

```html
<div class="box standard">
  <p>text</p>
</div>
```
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过shadow()方法来初始化该阴影插件。

```html
$(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"属性的值。|

web299.com

可快速生成各种阴影效果的jQuery插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果