当鼠标悬停时,如何让普通图像变为黑白,当鼠标悬空时恢复正常?使用HTML5画布的jQuery - BW效果
-1
A
回答
1
从http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html:
(评论我自己的)
// create canvas element
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
// assuming imgObj is a DOM representation of your image, get the width
var imgW = imgObj.width;
// ... and the height
var imgH = imgObj.height;
// set the canvas to the image dimensions
canvas.width = imgW;
canvas.height = imgH;
// draw the image on the canvas
canvasContext.drawImage(imgObj, 0, 0);
// get every pixel in the image
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
// cycle through the pixels vertically
for(>var y = 0; y < imgPixels.height; y++){
// cycle through the pixels horizontally
for(>var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
// create an average grayscale color for the pixel
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2])/3;
// set the pixel to the newly created average color
imgPixels.data[i] = avg;
// do the same for the next two pixels
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
// overwrite the canvas image with the newly created array of pixels
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
// get a data URL which is to be used in the SRC attribute of the image
return canvas.toDataURL();
此外,如果你想有一个 '插件和播放' jQuery插件为你做到这一点,需要看看this jQuery plugin that desaturates the image for you。
+0
嵌套fors有点难看,如果你使用imgPixels.length – 2011-05-01 11:05:06
0
这里将是功能,因为我看到它:
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
这里将是CSS:
div.fadehover {
position: relative;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
我得到这个从这里:http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/
相关问题
- 1. 用HTML5画布绘制草图效果
- 2. HTML5画布中的桥文字效果
- 3. HTML5画布上的发光效果?
- 4. 如何使用html5在画布上创建动画效果?
- 5. 淡出文字效果在HTML5画布
- 6. 以下鼠标效果的HTML5画布jquery
- 7. Python等效的HTML5画布
- 8. 使用HTML5画布
- 9. 用jQuery启动纸屑效果(画布)
- 10. 使用HTML5画布文本 - SEO后果
- 11. 基本动画效果 - 我应该使用jQuery还是HTML5 Canvas?
- 12. 使HTML5画布填充效率更高
- 13. 使用画布的橡皮擦效果
- 14. 使用HTML5对齐画布
- 15. HTML5 Canvas动画效果
- 16. 使用jQuery/HTML5聚焦灯光效果
- 17. Pannable画布效果
- 18. 使用HTML5画布绘图
- 19. 使用jQuery/javaScript和HTML5画布进行动画
- 20. Html5画布动画
- 21. Jquery使用动画效果动画效果的Flash动画文本
- 22. 动画选项HTML5画布/ CSS3/jQuery
- 23. 使用带有SVG的HTML5画布
- 24. 动画jQuery效果
- 25. 使用jQuery动画与淡出效果
- 26. HTML5画布的BlendMode
- 27. 关于android画布效果的效率
- 28. 从HTML5画布
- 29. HTML5画布ScreenToIso
- 30. HTML5画布的jQuery的getContext类上
你想要做手工或者你想要一个可以做到这一点的图书馆? – 2011-05-01 11:02:04