HTML5与jQuery实现渐变绚丽网页图片效果
HTML5与jQuery如何实现渐变绚丽网页图片效果呢?通过HTML5和jQuery创建一个灰度/彩色的实现绚丽渐变效果。在HTML5出现之前,要想实现此类似渐变效果,需要彩图和灰度图像两幅图片,利用制图工具实现渐变图片效果。现在HTML5让开发者通过HTML5与jQuery实现渐变绚丽网页图片效果。
HTML 5和jQuery动态转换任意一张彩色图像为灰度显示展示。
通过HTML5和jQuery向你展示如何创建一个灰度/彩色图像的鼠标悬浮效果。在HTML5出现前,实现这个效果需要两幅图像,彩色的图像和灰度的图像版本版本。现在HTML5让开发者创建这个效果更加容易和高效,因为原始图像会直接生成灰度图像。
jQuery代码:
下面的jQuery代码会找寻网页中的图像生成灰度的图像版本,直接显示在浏览器中。当鼠标悬浮在图像上,代码会把灰度图像渐变为彩色图像。
<mce:script src="jquery.min.js" mce_src="jquery.min.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
// On window load. This waits until images have loaded which is essential
$(window).load(function(){
// Fade in images so there isn't a color "pop" document load and then on window load
$(".item img").fadeIn(500);
// clone image
$('.item img').each(function(){
var el = $(this);
el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style="display: inline-block"mce_style="display: inline-block">").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscale(this.src);
});
// Fade image
$('.item img').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
})
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 1000);
});
});
// Grayscale w canvas method
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
// --></mce:script>
使用方法:
- 引用jQuery.js
jQuery.js 下载地址:http://code.google.com/p/jqueryjs/downloads/list
- 粘贴以上的代码
- 设置目标图像(例如.post-img, img, .gallery img等等)
- 你可以更改动画的速度(例如3000=3秒)
兼容性:
此段代码可以工作在任何支持HTML5和Javascript的浏览器里,例如:谷歌Chrome、Safari和Firefox。浏览器不支持HTML5图像将会显示原始的彩色图像。如果本地无法正常工作,你可以将HTML代码放到Web服务器上进行测试。
示例:HTML5灰度渐变(http://webdesignerwall.com/demo/html5-grayscale/)
网站内容由Css3-Html5之家整理编辑(如有疑问,请到Css3-Html5之家留言)
Css3-Html5之家,专业的交流学习平台。
转载于:https://www.cnblogs.com/jcomet/archive/2012/02/22/2363870.html
HTML5与jQuery实现渐变绚丽网页图片效果相关推荐
- HTML5实现Word中文字全环绕图片效果
实现这个功能是当时看见数字报的展示出来的编排方式,就是图片+热点,而且下载打开还是PDF的,让我这个WP用户咋个看.想实现Word中的编排方式,也需要浏览器支持Word插件,火狐.谷歌.Opera这些 ...
- html5图片文字环绕效果,HTML5实现Word中文字全环绕图片效果
实现这个功能是当时看见数字报的展示出来的编排方式,就是图片+热点,而且下载打开还是PDF的,让我这个WP用户咋个看.想实现Word中的编排方式,也需要浏览器支持Word插件,火狐.谷歌.Opera这些 ...
- 【实战HTML5与CSS3 第一篇】初探水深,美丽的导航,绚丽的图片爆炸!!
目录 [实战HTML5与CSS3 第一篇]初探水深,美丽的导航,绚丽的图片爆炸!! [实战HTML5与CSS3 第二篇]绚丽的快速导航! [实战HTML5与CSS3 第三篇]我第一个HTML5网页诞生 ...
- 实战HTML5与CSS3 第一篇】初探水深,美丽的导航,绚丽的图片爆炸!!
[实战HTML5与CSS3 第一篇]初探水深,美丽的导航,绚丽的图片爆炸!! [实战HTML5与CSS3 第二篇]绚丽的快速导航! [实战HTML5与CSS3 第三篇]我第一个HTML5网页诞生了(提 ...
- web网页设计实例作业 HTML5+CSS大作业——简单的个人图片网站(6页)
HTML5+CSS大作业--简单的个人图片网站(6页) 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...
- 图片效果集合(js、jquery或html5)
1.jQuery HTML5 幻灯片 使用支持HTML5的浏览器会有特殊效果,即切换图片时颜色的改变 文章:http://keleyi.com/a/bjac/b8i3xdui.htm 效果:http: ...
- 利用Jquery Lazyload JS插件实现网页图片延迟加载
Jquery Lazyload是一款网页图片延迟加载JS插件,本文介绍该JS的使用方法. 最新的jquery lazyload可以单独使用(即不依赖jquery),本文介绍的是依赖jquery的使用及 ...
- html5圆形头像滚动效果,基于jQuery实现响应式圆形图片轮播特效
本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,misl ...
- 基于html篮球网页游戏,基于html5和jquery的篮球跳动游戏
今天给大家分享一款基于html5和jquery的篮球跳动游戏.这款实例和之前分享的HTML5重力感应小球冲撞动画类似.用鼠标拖动篮球,篮球在页面上跳动,可在演示中看下效果.效果图如下: 实现的代码. ...
最新文章
- PHP mkdir()无写权限的问题解决方法
- 全球及中国燃料乙醇行业产量规模及供需前景分析报告2021-2027年
- java基础IO BIO、NIO、AIO的区别
- 图像中值处理MATLAB实现
- 中断(interrupted()、isInterrupted())、Executor的中断
- CF938G Shortest Path Queries(线性基/线段树分治/异或)
- php post 丢失,php post大量数据时发现数据丢失问题解决方法,post数据丢失_PHP教程...
- SpringMCV结构
- logo语言是计算机语言吗,LOGO语言的编程
- IMDB TOP250电影介绍(下)
- 深度学习入门,Keras Conv2D类参数详解
- 计算机开机显示器不亮,电脑开机显示器不亮,小编教你电脑显示器不亮怎么解决...
- 10.27 正睿提高9
- Tomato绕激活工具,支持两网信号/修复通知/游戏机
- 华东交通大学2018年ACM双基程序设计大赛题解
- 折纸飞机的12种方法【转】
- 概率统计·假设检验【正态总体均值的假设检验、正态总体方差的假设检验】
- 鱼C论坛上Python练习题-72
- 微机接口课程设计PPT汇报
- 全志A20平台实现VGA和HDMI双屏同显
热门文章
- Android社招最全面试题,妈妈再也不用担心我找工作了!
- 【PAT (Advanced Level) Practice】1086 Tree Traversals Again (25 分)
- 【深度学习模型的训练与评估】一个实例:Iris多分类
- python【数据结构与算法】分治算法之大整数乘法
- 数据分析的 8 种思维
- 如何使用CNN进行物体识别和分类_CNN原理与实践指南
- 计算机专业英语公开课教案,8个维度,教你如何上好一节英语公开课
- PHP从入门到跑路(一), 安装PHP环境
- 武汉网络推广教大家如何编辑出更高质量的文章TDK?
- 判读一个对象不为空_LabVIEW面向对象编程_初窥门径(3):开发实践