日期：2012-5-4 来源：GBin1.com
大家有没有尝试使用纯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元素。
....
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/8288/viewspace-722706/ ，如需转载，请注明出处，否则将追究法律责任。
请登录后发表评论
登录
全部评论
