jQuery阴影生成插件jquery.shadow.js

所属分类:UI,其他-背景,杂项,独立的部件

 16588  203  查看评论 (1)
分享到微信朋友圈
X
jQuery阴影生成插件jquery.shadow.js ie兼容9

jquery.shadow.js

可以快速实现各种阴影效果的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个可用的配置参数:

参数类型默认值描述
typeString"standart"阴影的类型,可以是:"standard", "lifted", "perspective", "raised", "sides"。
radiusInteger4圆角半径,单位像素。
sidesString''当类型为"sides"时可用,可取值有:vt-1, vt-2, hz-1, hz-2。
rotateString"-3deg""transform:rotate"属性的值。

相关插件-背景,杂项,独立的部件

漂亮的全屏Slideshow幻灯滑块效果(jQuery)

漂亮的全屏Slideshow幻灯滑块效果(jQuery)
  背景
 42217  418

jQuery全屏背景插件Vegas2

网页全屏背景jQuery插件 Vegas2,它和其它背景插件不同之处就是带有幻灯片功能。幻灯片的切换有多种风格,如旋转、渐隐、左右等方式,切换的时候还有进度条显示。
  背景
 42018  494

首页大屏背景图平滑切换

首页大屏背景图平滑切换
  背景
 39572  389

jQuery颜色选择器ColorPicker

ColorPicker基于强大的jQuery,使用方便、配置简单,同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中,兼容各大浏览器。
  背景
 72431  335

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    有你在、牵手就能温暖つ 0
    2020/5/8 11:56:56
    刚好用的到,感谢 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复