[html]

1. <script type="text/javascript">

2.  

3. $(window).load(function(){

4. $(".Brand li img").animate({opacity:1},500);//找到需要加載的圖片1

5. $('.Brand li img').each(function(){         //找到需要加載的圖片2

6. var el = $(this);

7. el.css({"position":"absolute"}).wrap("

   ").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){

8. var el = $(this);

9. el.parent().css({"width":this.width,"height":this.height});

10. el.dequeue();

11. });

12. this.src = grayscale(this.src);

13. });

14. // Fade image

15. $('.Brand li img').mouseover(function(){   //找到需要加載的圖片3

16. $(this).parent().find('img:first').stop().animate({opacity:1}, 1000);

17. })

18. $('.img_grayscale').mouseout(function(){

19. $(this).stop().animate({opacity:0}, 1000);

20. });

21. });

22.  

23. // Grayscale w canvas method

24. function grayscale(src){

25. var canvas = document.createElement('canvas');

26. var ctx = canvas.getContext('2d');

27. var imgObj = new Image();

28. imgObj.src = src;

29. canvas.width = imgObj.width;

30. canvas.height = imgObj.height;

31. ctx.drawImage(imgObj, 0, 0);

32. var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);

33. for(var y = 0; y < imgPixels.height; y++){

34. for(var x = 0; x < imgPixels.width; x++){

35. var i = (y * 4) * imgPixels.width + x * 4;

36. var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;

37. imgPixels.data[i] = avg;

38. imgPixels.data[i + 1] = avg;

39. imgPixels.data[i + 2] = avg;

40. }

41. }

42. ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

43. return canvas.toDataURL();

44. }

45.  

46. </script>