使用jQuery插件realshadow实现超酷真实阴影效果
2012-05-04 00:00
821 查看
日期:2012-5-4 来源:GBin1.com
在线演示 本地下载
大家有没有尝试使用纯CSS和Javascript来生成带有颜色的元素阴影?如果你也想生成这样超酷的特效的话,大家可以尝试使用这个jQuery插件: real shadow。
使用这个简单的插件,你可以迅速给页面上的特定元素添加阴影效果,最酷的地方在于随着你的鼠标位置,阴影会对应改变的哦!
然后,使用如下代码:
$('#element').realshadow({
});
即可搞定!是不是很简答?
followMouse:缺省为false,指定阴影是否跟随鼠标移动变化
pageX:用来产生阴影的光源x坐标
pageY:用来产生阴影的光源y坐标
c:阴影颜色定义,包括r, g, b
如果你需要给不同的元素指定颜色,你可以使用如下方法:
以上代码中我们使用rel来定义对应元素的阴影颜色。
下面是我们的在线演示的完整代码。
以上定义了需要添加阴影的li元素。
....
来源:使用jQuery插件realshadow实现超酷真实阴影效果
在线演示 本地下载
大家有没有尝试使用纯CSS和Javascript来生成带有颜色的元素阴影?如果你也想生成这样超酷的特效的话,大家可以尝试使用这个jQuery插件: real shadow。
使用这个简单的插件,你可以迅速给页面上的特定元素添加阴影效果,最酷的地方在于随着你的鼠标位置,阴影会对应改变的哦!
如何使用?
这个插件的使用非常简答,你只需要倒入jQuery和插件类库,如下:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/realshadow.js"></script>
然后,使用如下代码:
$('#element').realshadow({
});
即可搞定!是不是很简答?
相关插件参数
这个插件拥有几个简单的选项可以帮助你自定义,如下:followMouse:缺省为false,指定阴影是否跟随鼠标移动变化
pageX:用来产生阴影的光源x坐标
pageY:用来产生阴影的光源y坐标
c:阴影颜色定义,包括r, g, b
如果你需要给不同的元素指定颜色,你可以使用如下方法:
<span rel="r"></span> <span rel="g"></span> <span rel="b"></span> <span rel="rg"></span> <span rel="gb"></span> <span rel="br"></span> <span rel="rgb"></span>
以上代码中我们使用rel来定义对应元素的阴影颜色。
下面是我们的在线演示的完整代码。
HTML代码
<ul id="container"> <li data-tag="Ducati" rel="c"><strong>Hypermotard 796 Silver</strong><img src="img/motor/Model-Page_2012_Hypermotard_796_298.jpg"><span> Ducati</span></lspan> <li data-tag="Ducati" rel="r"><strong>Hypermotard 796 Red</strong><img src="img/motor/HM-796_2001_R_[298x168].jpg"><span> Ducati</span></lspan> <li data-tag="Ducati" rel="r"><strong>Hypermotard 1100 Evo Red</strong><img src="img/motor/2012-Ducati-Hypermotard-1100EVO4-298.jpg"><span> Ducati</span></lspan> <li data-tag="Ducati" rel="r"><strong>Streetfighter 848</strong><img src="img/motor/Color_SF-848_R_NC_298x168.jpg"><span> Ducati</span></lspan> <li data-tag="Ducati" rel="c"><strong>Diavel Carbon</strong><img src="img/motor/Model-Page_2012_Hypermotard_796_298.jpg"><span> Ducati</span></lspan> <li data-tag="BMW" rel="b"><strong>BMW K1300S HP</strong><img src="img/motor/2012-BMW-K1300SHPb-298x168.jpg"><span> BMW</span></lspan> <li data-tag="BMW" rel="cr"><strong>2012 BMW G650GS</strong><img src="img/motor/2012-BMW-G650GSd-298x168.jpg"><span> BMW</span></lspan> <li data-tag="Beneli" rel="gb"><strong>Tre-K 1130 Amazonas</strong><img src="img/motor/2012-Benelli-TreK1130Amazonas1-298x168.jpg"><span> Beneli</span></lspan> <li data-tag="KTM" rel="r"><strong>2012 KTM 1190 RC8R</strong><img src="img/motor/2012-KTM-1190RC8R4-298x168.jpg"><span> KTM</span></lspan> </ul>
以上定义了需要添加阴影的li元素。
....
来源:使用jQuery插件realshadow实现超酷真实阴影效果
相关文章推荐
- 使用jQuery插件realshadow实现超酷真实阴影效果
- 使用jQuery插件realshadow实现超酷真实阴影效果
- 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
- 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
- 使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果
- 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
- 使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果
- jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
- ASP.NET中使用jQuery插件实现图片幻灯效果
- 在asp.net中使用JQuery的SlideViewer插件实现图片的滚动效果
- 使用jquery的sortable插件实现拖动效果,以及影响blur事件触发的解决方法
- Jquery实现WIN7-AeroWindow窗口效果插件使用
- jquery使用CSS3实现文字动画效果插件Textillate.js
- 使用jQuery插件实现 模拟dialog的遮罩效果
- 使用jquery的sortable插件实现拖动效果,以及影响blur事件触发的解决方法
- 分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果
- 使用jQuery插件filtrify实现的超酷动态标签分类摩托车新款展示
- 使用jQuery插件filtrify实现的超酷动态标签分类摩托车新款展示
- 使用Jquery分页插件jquery.pagination.js 实现无刷新分页效果
- 使用jquery插件实现瀑布流效果