ITPub博客

首页 > Linux操作系统 > Linux操作系统 > 使用jQuery插件realshadow实现超酷真实阴影效果

使用jQuery插件realshadow实现超酷真实阴影效果

原创 Linux操作系统 作者:jjfat 时间:2012-05-04 11:25:28 0 删除 编辑

日期:2012-5-4  来源:GBin1.com

使用jQuery插件realshadow实现超酷真实阴影效果

在线演示  本地下载

大家有没有尝试使用纯CSS和Javascript来生成带有颜色的元素阴影?如果你也想生成这样超酷的特效的话,大家可以尝试使用这个jQuery插件: real shadow

使用这个简单的插件,你可以迅速给页面上的特定元素添加阴影效果,最酷的地方在于随着你的鼠标位置,阴影会对应改变的哦!

如何使用?

这个插件的使用非常简答,你只需要倒入jQuery和插件类库,如下:


然后,使用如下代码:

$('#element').realshadow({
});

即可搞定!是不是很简答?

相关插件参数

这个插件拥有几个简单的选项可以帮助你自定义,如下:

  • followMouse:缺省为false,指定阴影是否跟随鼠标移动变化
  • pageX:用来产生阴影的光源x坐标 
  • pageY:用来产生阴影的光源y坐标 
  • c:阴影颜色定义,包括r, g, b

如果你需要给不同的元素指定颜色,你可以使用如下方法:








以上代码中我们使用rel来定义对应元素的阴影颜色。

下面是我们的在线演示的完整代码。

HTML代码


        
  • Hypermotard 796 Silver Ducati
        
  • Hypermotard 796 Red Ducati
        
  • Hypermotard 1100 Evo Red Ducati
        
  • Streetfighter 848 Ducati
        
  • Diavel Carbon Ducati
        
  • BMW K1300S HP BMW
        
  • 2012 BMW G650GS BMW
        
  • Tre-K 1130 Amazonas Beneli
        
  • 2012 KTM 1190 RC8R KTM

以上定义了需要添加阴影的li元素。

....

来源:使用jQuery插件realshadow实现超酷真实阴影效果

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/8288/viewspace-722706/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2011-10-08

  • 博文量
    316
  • 访问量
    370911