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

日期：2012-5-4  来源：

 

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

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

如何使用？

这个插件的使用非常简答，你只需要倒入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元素。

....

来源：