使用jQuery插件realshadow实现超酷真实阴影效果
为什么80%的码农都做不了架构师?>>>
日期:2012-5-4 来源:GBin1.com
在线演示 本地下载
大家有没有尝试使用纯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实现超酷真实阴影效果
转载于:https://my.oschina.net/gbin1/blog/56101
使用jQuery插件realshadow实现超酷真实阴影效果相关推荐
- 分类图片展示php源码,HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)...
本文讲述了HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果.分享给大家供大家参考,具体如下: 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我 ...
- 20 个 jQuery 超酷视觉效果构建教程推荐
作为web开发程序员来说,我们都非常喜欢jQuery构造的超酷视觉效果.本文中我们将精选一组jQuery效果教程.大家将从这些教程中学习如何开发超级酷的视觉效果特效.根据这些教程,大家可以一步一步构建 ...
- 炫酷实用的jQuery插件 涵盖菜单、按钮、图片
新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...
- 推荐12款非常有用的流行 jQuery 插件
jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色.jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的 ...
- jQuery插件:超酷的多列网格式拖放插件gridster.js
为什么80%的码农都做不了架构师?>>> 日期:2012-8-15 来源:GBin1.com 在线演示 本地下载 以往的文章中,我们分享了很多jQuery相关拖放插件,今天 ...
- 分享超酷的添加图片悬浮特效jQuery插件 - Adipoli
日期:2012/03/08 在线演示 本地下载 今天分享一个帮助你添加图片悬浮特效的jQuery插件 - Adipoli,这个插件可以帮助你添加各种不同的悬浮特效到你指定的图片上,特别适合制作你的相 ...
- 帮助你高效开发Ajax应用的超酷jQuery插件 - AjaxML
日期:2012-4-20 来源:GBin1.com 如果你使用jQuery进行Ajax开发的话,你一定要试试今天我们这里介绍的这一款jQuery插件 - AjaxML.它是一款能够帮助你提高ajax ...
- 10款非常有效的帮助你设计超酷响应式布局的jQuery插件
日期:2012/02/24 来源:GBin1.com 如 果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇. 相对于传统的页面设 ...
- 分享10个帮助你实现超酷特效的jQuery插件
日期:2012-4-4 来源:GBin1.com 今天我们这篇文章中将推荐给大家10个超酷的jQuery插件帮助大家实现超酷的jQuery特效,绝对超过其它的普通jQuery插件.希望大家喜欢! 1 ...
最新文章
- python学习第一天 -----2019年4月15日
- PHP知识点 自己做个记录
- Android新浪微博client(七)——ListView图片异步加载、高速缓存
- 手机python3_python3 简单手机验证码的实现
- Django 3.2.5博客开发教程:实现网站首页
- proxy跨域不生效_vue前后端端口号不同,proxytable代理跨域无效
- 《剑指offer》数组中出现次数超过一半的数字
- d3.js和mysql_如何从mysql数据库中提取数据并使用D3.JS进行可视化?
- 二级c语言需要知道的知识点,2020年全国计算机二级C语言复习知识点:C语言基本知识(...
- 专利翻译常用计算机词汇,基于NP树的英文专利文献术语自动翻译技术研究-计算机应用技术专业论文.docx...
- 多少像素才合适 网页设计标准尺寸大讲解
- python使用json_Python之json使用
- Python 异常(Exception)
- java面笔试_java笔试手写算法面试题大全含答案
- c# 程序员学习android(2)登陆界面
- Android 获取网络链接类型
- springboot整合mybatis错误 Invalid bound statement (not found): 解决办法
- 搜狗提交软件之搜狗泛目录大量泛收录
- IP数据报首部的格式:关于标识(identification)、标志(flag)和片偏移
- Android 修改zxing二维码样式
热门文章
- BZOJ1565:[NOI2009]植物大战僵尸——题解
- webpack - 收藏集 - 掘金
- DocumentNavigator是什么东东?
- 网络攻防第十一周作业
- 扎心!“就业难”背后的“十宗罪”我竟占了一半
- CNKI中银屑病、大肠菌群、内毒素LPS(调研手稿三)
- TRUNCATE TABLE和PURGE_TABLE的区别
- BI中事实表和维度表的定义+具体SQL操作(转载+自己添加实验)
- CPU time与WALL time
- 图表达相关书书籍调研