html让图片悬浮在网页,网页制作灰度图片悬浮效果利用HTML5和jQuery实现

jQuery 代码：

// 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("

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

}

html让图片悬浮在网页,网页制作灰度图片悬浮效果利用HTML5和jQuery实现相关推荐

超方便的验证码套件Captcha Genie，帮你轻松在网页上制作出图片验证码！（下）
四.验证输入结果当使用者输入了验证码之后,我们必须在网页表单送出的PHP程式中进行验证,程式的写法是: session_start(); $Code = $_REQUEST["Turin ...
python写图片爬取软件_python制作微博图片爬取工具
有小半个月没有发博客了,因为一直在研究python的GUI,买了一本书学习了一些基础,用我所学做了我的第一款GUI--微博图片爬取工具.本软件源代码已经放在了博客中,另外软件已经打包好上传到网盘中以供 ...
vue 图片剪辑_用vue制作的图片剪辑组件
vue 图片剪辑形状 (vueShapeImg) Picture clipping component made with vue. 用vue制作的图片剪辑组件. View demo 查看演示 Do ...
超方便的验证码套件Captcha Genie，帮你轻松在网页上制作出图片验证码！（上）
大家都应该看过网路上有形形色色的图片验证码(Captcha),用来防止一些机器人程式恶意去网页上留言或注册,浪费系统的资源.但是如果你自己有开发网页程式,要如何在自己的网页上设计出又简单.又有效的验证 ...
html制作卷轴卷合效果,【HTML5】利用lufylegend实现游戏中的卷轴
什么是卷轴玩过RPG或者横版格斗的同学应该知道,人物走到屏幕中央后,由于地图过大,地图会进行移动,人物则相对静止不动.这个就是传说中的卷轴.例如下图是我的游戏"三国战线"里的卷轴 ...
HTML5与jQuery实现渐变绚丽网页图片效果
HTML5与jQuery如何实现渐变绚丽网页图片效果呢?通过HTML5和jQuery创建一个灰度/彩色的实现绚丽渐变效果.在HTML5出现之前,要想实现此类似渐变效果,需要彩图和灰度图像 ...
学生DW静态网页设计旅游—我的家乡新密(15页)含论文新密旅游网页设计制作简单静态HTML网页作品我的家乡网页作业成品学生旅游网站模板
HTML5期末大作业:我的家乡网站设计--旅游-我的家乡新密(15页)含论文新密旅游网页设计制作简单静态HTML 文章目录 HTML5期末大作业:我的家乡网站设计--旅游-我的家乡新密(15页)含 ...
使用Python批量转换彩色图片到灰度图片
当涉及到图像处理和计算机视觉时,有时需要将彩色图片转换为灰度图片,一张一张使用PS等工具转换十分复杂且没有必要.今天介绍的这种方法用到了Pillow库.使用Pillow库来打开,加载并转换彩色图像,并 ...
如何在html中添加图片的自动滚播,制作网页中的滚动图片，怎样循环播放。
制作网页中的滚动图片,怎样循环播放.0 zhang7_112016.03.23浏览479次分享举报怎样循环播放;> &lt.scrollLeft插入需要滚动的图片"/,spe ...
html背景图平移显示一次,制作网页如何使背景图片只出现一次(拉伸)？
制作页面时,有时需要在表格内插入背景图,我们可以使用CSS进行控制,代码: style="background-image:url(./images/counter_bg.jpg);back ...

html让图片悬浮在网页,网页制作灰度图片悬浮效果利用HTML5和jQuery实现

html让图片悬浮在网页,网页制作灰度图片悬浮效果利用HTML5和jQuery实现相关推荐

最新文章

热门文章