使用jQuery插件realshadow实现超酷真实阴影效果
来源:互联网 发布:数据库declare用法 编辑:程序博客网 时间:2024/05/19 03:19
在线演示 本地下载
大家有没有尝试使用纯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代码
以上定义了需要添加阴影的li元素。
Javascript代码
$(function() { $('#container li').realshadow({ }); });
我们使用缺省的选项值来生成阴影。
是不是非常酷,大家可以将这个特效应用到用户的登录页面,绝对会让你的用户对你的网站过目不忘的,希望大家喜欢,如果你有建议和问题,请给我们留言,谢谢!
来源:使用jQuery插件realshadow实现超酷真实阴影效果
- 使用jQuery插件realshadow实现超酷真实阴影效果
- 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
- 使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果
- 使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果
- 使用jQuery background-position插件来创建超酷的导航条效果
- 使用jquery插件实现日历效果
- 如何实现更真实的软阴影效果
- 乐杨俊:jquery实现div阴影效果
- jquery实现div阴影效果示例代码
- 分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果
- 使用jQuery插件filtrify实现的超酷动态标签分类摩托车新款展示
- 使用jQuery开发一个超酷的倒计时效果
- 使用jQuery开发一个超酷的倒计时效果
- 使用shadowmap实现软阴影效果
- 使用layer-list实现阴影效果
- jquery插件--实现手风琴效果
- jquery插件实现手风琴效果
- jquery插件实现手风琴效果!
- Win8 上使用 DDTK, IIS 配置
- 趋势的股票会扭转而进一步上涨
- 基于S5PC100的FIMC控制器解析
- Capture Image from Camera and Display in Activity
- 学习
- 使用jQuery插件realshadow实现超酷真实阴影效果
- SQL注入原理解析
- UC/OS和uClinux的比较
- oracle中汉字转全拼或首字母
- Linux shell脚本学习
- 要做远程升级,收集几个P2p开源项目,以后慢慢研究
- 多线程读取文件File
- android adb 报错:more than one device or emulator
- 字符串的操作