DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> HTML5和jQuery制作網頁灰度圖片懸浮效果
HTML5和jQuery制作網頁灰度圖片懸浮效果
編輯:JavaScript綜合知識      日期:2016/12/29 15:05:47

在這個教程中,作者使用HTML5的canvas將針對網站圖片做不同的灰度處理。這個演示中使用HTML5和jQuery的黃金組合來動態的克隆顏色來實現灰度效果。整個顯示非常炫。是學習HTML5 canvas的不錯實戰教程。

HTML5和jQuery制作網頁灰度圖片懸浮效果   教程

jQuery 代碼:

  <script src="jquery.min.js" type="text/javascript"></script>

  <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'>").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();

  }

       </script>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved