原文:http://www.webdesignerwall.com/tutorials/html5-grayscale-image-hover/
译者:蒋宇捷
转载请标明出处:蒋宇捷(hfahe)
http://blog.csdn.net/hfahe
曾几何时,网站上显示的灰度图像必须手动进行转换。现在使用HTML5画布,图像可以被巧妙的转换为灰色,而不必使用图像编辑软件。我下面有一个示例,展示如何使用HTML5和jQuery动态的将彩色图像转换为灰色。贡献者:感谢达西·克拉克(我在Themify的合伙人)贡献jQuery和Javascript代码。
示例:HTML5灰度渐变
目的
这个示例的目的是向你展示如何使用HTML5和jQuery创建一个灰度/彩色图像的鼠标悬浮效果。在HTML5出现前,实现这个效果需要两幅图像,彩色的和灰度的版本。现在HTML5让创建这个效果更加容易和高效,因为灰色图像将会直接从原始文件生成。我希望你会发现这个脚本在例如陈列橱或者相片册的设计里相当有用。
jQuery代码
下面的jQuery代码会找寻目标图像并生成一个灰度的版本。当鼠标悬浮在图像上,代码将会把灰度图像渐变为彩色的。
如何使用
在你的站点上使用这个效果:
-
引用jQuery.js
- 粘贴以上的代码
-
设置目标图像(例如.post-img, img,
.gallery img等等)
-
你可以更改动画的速度(例如1000=1秒)
兼容性
可以工作在任何支持HTML5和Javascript的浏览器上,例如Chrome、Safari和Firefox。如果浏览器不支持HTML5,这个效果将会退回到原始的彩色图片。注意:如果本地文件在Firefox和Chrome上不工作,你必须要把HTML代码放到一个Web服务器上。
鸣谢
Javascript和HTML5灰度渐变代码来自于达西·克拉克。
分享到:
相关推荐
超酷loading效果超酷loading效果
今天我们分享一个来超酷弹跳球效果,这里我们使用纯HTML5的画布来实现动画及其图形。整个效果使用小球来组合生成字体,如果你的鼠标逼近这些小球,它们会四散而逃,当你的鼠标离开后,它们又自动复原,效果很酷,...
用JavaScript创建超酷时钟背景特效
提前欣赏一下 html5 超酷功能 火狐下运行正常
HTML5超酷表单展示效果.zip
超酷3D照片展示效果
vb 超酷菜单,彩色渐变 可显示背景图片,可添加菜单图标 可以有声音
JS超酷图片翻动展示效果,根据鼠标进出图片的方向来控制图片进出的方式,效果超炫,兼容主流浏览器!
flux.js是一款能做出3D效果的jQuery幻灯片插件。这款jQuery幻灯片插件共有5种效果:爆炸效果、3D翻转效果、3D旋转效果、立方体效果和翻页效果。需要注意的是flux需要浏览器支持CSS3 transitions才能正常工作。
html5结合jQuery制作的超酷即时贴功能效果超越flash.zip
这是一款HTML5超酷响应式视频背景动画特效。该视频背景可以将视频自适应屏幕的大小,制作出炫酷的动态视频背景效果。
用JQUERY实现的超酷的翻书效果,完整的DEMO。
超酷大气HTML5网站模板是一款使用了bootstrap构建,如果了解bootstrap的用户我想你一定会喜欢上它。
内容索引:脚本资源,jQuery,立体文字,渐变文字 jQuery 实现超酷的立体渐变文字效果,代码不算多,运行时候稍微有点慢,不过已经不错了,发挥了jQuery的最佳潜能,你该相信jQuery的强大了吧?看看效果吧,源码爱好者...
无需图片jQuery+html5的canvas绘制出超酷loading效果.zip 无需图片jQuery+html5的canvas绘制出超酷loading效果.zip 无需图片jQuery+html5的canvas绘制出超酷loading效果.zip
新的一周开始了,小编继续要为大家分享实用超酷的HTML5应用,今天分享的这9款最新HTML5/CSS3应用你一定会很喜欢,一起来看看。 1、HTML5 Canvas模拟衣服撕扯动画 超级逼真 今天又要来推荐一款HTML5 Canvas动画,是一...
利用C#实现超酷动态图像按钮。 现在越来越多的程序界面做的是相当的酷啊,无论是什么平台mac、windows还是linux,其界面元素越来越丰富,一个小小的button背景都要在鼠标的不同事件激活下渐变来渐变去。但是,遍历...