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

当前位置:主页 > jQuery库 > 布局和界面 > 可快速生成各种阴影效果的jQuery插件
可快速生成各种阴影效果的jQuery插件
分享:

    插件介绍

    这是一款可以快速实现各种阴影效果的jQuery插件。该插件以CSS3 box-shadow为基础,使用者可以通过配置参数快速为元素生成各种投影效果。

    浏览器兼容性

    浏览器兼容性
    时间:2016-09-22
    阅读:
麦子学院
简要教程

这是一款可以快速实现各种阴影效果的jQuery插件。该插件以CSS3 box-shadow为基础,使用者可以通过配置参数快速为元素生成各种投影效果。

使用方法

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

<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结构如下:

<div class="box standard">
  <p>text</p>
</div>
                
初始化插件

在页面DOM元素加载完毕之后,可以通过shadow()方法来初始化该阴影插件。

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

网友评论