HTML5与jQuery实现渐变绚丽网页图片效果


HTML5与jQuery如何实现渐变绚丽网页图片效果呢?通过HTML5和jQuery创建一个灰度/彩色的实现绚丽渐变效果。在HTML5出现之前,要想实现此类似渐变效果,需要彩图和灰度图像两幅...

        });
        // 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/)

更多 var 相关资讯

如何使用javascript/jQuery预先加载图片

下面这段代码可以有效的帮助你预先加载图片。 (function($) { var cache = []; //参数是图片相对于当前页面的路径 $.preLoadImages = function() { var a

jQuery和CSS3定制HTML5视频播放器

目前,随着越来越多的浏览器开始支持更多的HTML5新特性,开发者也逐渐关注HTML5的开发。在众多HTML5的新特性中,视频方面的新特性是很值得开发者和用户关注的。现在,只需要有支持H

更多 jquery动画 相关资讯

0基础接触html5之jquery(一)简介

本人之前做as的,对html真的是0基础,都是这几天自己摸索的,所以肯定有很多考虑不到,或说的不对的地方。欢迎拍砖 html5离不开js编程,而进行js编程就不得不说Jquery,那么什么是Jque

更多 jquery 相关资讯

如何使用javascript/jQuery预先加载图片

下面这段代码可以有效的帮助你预先加载图片。 (function($) { var cache = []; //参数是图片相对于当前页面的路径 $.preLoadImages = function() { var a

分享5个超酷flash样式的jQuery导航和菜单

分享5个超酷flash样式的jQuery导航和菜单

当年风光无限的Flash特效,大家肯定在自己的项目和网站上应用过,现在看来依然非常的炫目,随着web技术的发展,我们现在可以使用Javascript开发出类似绚丽的应用,今天我们介

如何使用jQuery或者javascript处理Cookie?

Cookie是我们做前台开发过程中时常需要用到的技术,做为HTML5之前客户端唯一可以使用的本地存储方式,它能够有效的帮助我们实现一些简单数据的本地保存。今天我们介绍使用Javas

HTML5 CSS3 jQuery制作视频播放器完全指南

导读:毫无疑问HTML5已经是大势所趋,知名视频网站YouTube在两年前就开始推广HTML5播放器来代替Flash。虽然国内还没有完全普及HTML5浏览器,但在各大本土浏览器厂商的努力

0基础接触html5之jquery(二)选择器

jQuery中的选择器selecor是大家经常使用的强大功能,事实上jQuery提供给我们非常丰富的手段来使用选择器定位DOM元素。 下面先简单介绍一下用法选择器 实例

0基础接触html5之jquery(一)简介

本人之前做as的,对html真的是0基础,都是这几天自己摸索的,所以肯定有很多考虑不到,或说的不对的地方。欢迎拍砖 html5离不开js编程,而进行js编程就不得不说Jquery,那么什么是Jque

【HTML5】 jQuery Mobile 初体验

jQuery Mobile v1.1.0上个月已经发布,由于好奇就学习了一下。jQuery Mobile是 jQuery 在手机和平板设备上的版本,用于创建针对智能手机和平板电脑的跨设备Web应用。jQuery的用

Jquery mobile 中文手册下载

Jquery mobile是由(MT)Media Temple联合多家移动设备厂商以及软件企业共同发起的的针对触屏智能手机与平板电脑的website以及在线应用的前端开发框架。 Jquery mobile构建于

jQuery和CSS3定制HTML5视频播放器

目前,随着越来越多的浏览器开始支持更多的HTML5新特性,开发者也逐渐关注HTML5的开发。在众多HTML5的新特性中,视频方面的新特性是很值得开发者和用户关注的。现在,只需要有支持H

统一接口工具JQuery Mobile简介

很多开发者都积极寻找高效的方法,使得构建的基于移动的应用程序能在多种设备上运行。在本文中,将率先向大家介绍jQuery中的一个新的项目:JQuery Mobile。虽然它现在还