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


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

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

标签: jQuery