zoukankan      html  css  js  c++  java
  • 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之家,专业的交流学习平台。

  • 相关阅读:
    Java 第十一届 蓝桥杯 省模拟赛 梅花桩
    Java 第十一届 蓝桥杯 省模拟赛 梅花桩
    Java 第十一届 蓝桥杯 省模拟赛 梅花桩
    Java 第十一届 蓝桥杯 省模拟赛 元音字母辅音字母的数量
    Java 第十一届 蓝桥杯 省模拟赛 元音字母辅音字母的数量
    Java 第十一届 蓝桥杯 省模拟赛 元音字母辅音字母的数量
    Java 第十一届 蓝桥杯 省模拟赛 最大的元素距离
    Java 第十一届 蓝桥杯 省模拟赛 递增序列
    Java 第十一届 蓝桥杯 省模拟赛 递增序列
    Java 第十一届 蓝桥杯 省模拟赛 最大的元素距离
  • 原文地址:https://www.cnblogs.com/jcomet/p/2363870.html
Copyright © 2011-2022 走看看