CSS或JS实现gif动态图片的停止与播放，HTML5和jQuery制作网页灰度图片悬浮效果

百家乐-前端 | 2019-11-29 03:27

CSS或JS实现gif动态图表的甘休与播音

2015/12/06 · CSS, JavaScript · gif

初稿出处：张鑫旭

一、屋外：寒风吹，雪花飘；屋内：空调吹，代码飘

上午出来买菜，赶巧降水了，还夹杂着冰珠子。鄙人轮廓，穿的是生机勃勃件英俊但单薄的风骚大衣，立马冻成了中华田园犬。原来安插去钓鱼的，科科，作罢，早上在家相中央电视台5 克利夫兰骑士vsNew Orleans Pelicans，上午补动画码代码做随笔，好生舒畅。

对于习于旧贯性刷今日头条的本身，总时有的时候会看出相同上面包车型大巴玩乐：

测测你和小白(白百何(Bai Baihe卡塔尔卡塔尔国有哪些协同点，戳开动图，最早看清的词是何许？ie浏览器的校友能够按esc键(或截屏卡塔尔国，听大人讲在哪些词暂停，哪个词正是您哦！

OK, 这里现身一个浏览器性情，正是通过ESC飞速键，暂停gif的播报。据悉FireFox浏览器以前也可能有，后来被干掉了，依照@紫云妃的传道是：

是这样的,Firefox原本的显现是:在页面load事件做到,同一时间x开关变成刷新按键之后,esc依然有多少个效果与利益,中断当前正值发送的ajax,websocket,截至gif,apng动画的播放.但那几个效应太小众了,影响了普通顾客的运用,大概不当心按了esc,结果ajax断了,网页出错了.所以Firefox20改换成:网页加载成功后,esc键完全失效.

唯独，这种隐晦的但仿佛会影响平常机能的小本领确定是力不能支完成真正意义上的gif动态图片的安歇与播音的。一是宽容性，二是作用性，三是移动端未有ESC键。

据此，若是我们相见需求可以时时随地结束gif动态图片播放的供给的时候，就需求索求别的的出路。好，残冬里的暖身甘休，起头进入正题~~

HTML5和jQuery制作网页灰度图片悬浮效果

在此个科目中，小编运用HTML5的canvas将本着网站图片做不相同的灰度管理。那么些演示中运用HTML5和jQuery的黄金组合来动态的仿制颜色来贯彻灰度效果。整个呈现极度炫。是上学HTML5 canvas的不利实战教程。

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

在这里个课程中，小编辑访谈取HTML5的canvas将本着网址图片做差别的灰度管理。这几个演示中动用HTML5和jQuer...

二、gif图片本人可控前提下的方法风华正茂：多img能源支配管理

如果说，大家盼望暂停的gif是和睦(开荒职员卡塔尔国传上去的，不是顾客能够轻松上传不可控的gif. 大家得以那样管理，正是准备2套图片，多少个是gif动态图表，还应该有贰个是唯有风流罗曼蒂克帧的不改变的图形。然后使用JS来回切换`的src`值为这两张图片地址就好了。

此方式吗简单，笔者就不放实例了。

img.src="animate.gif"; // 可能变现的是 img.src="static.png";

img.src="animate.gif";

// 或者呈现的是

img.src="static.png";

本条点子最大的长处正是包容性强，全数浏览器都得以落成甘休效果。但是，这种艺术有个局限，就是，暂停时候展现的图片恒久是平等张。基本上能够说是截止，并不是暂停。

那有没有怎么着方法能够真正含义上的中止呢？还真有！

三、gif图片自个儿可控前提下的办法二：CSS3 animation调控

也等于我们来看的gif效果并不是一个确实的gif图片，而是选择CSS3的animation属性调节造成的逐帧动态图表效果。小编搜了下，@DO1路人乙有篇作品“css3-animation制作逐帧动漫”特地介绍了这种本事。说穿了纵然animation调整Pepsi-Colas图片的background-position值模拟gif效果。

譬如说，新版twitter的Like的作用，貌似就有应用该本领：

行使CSS3 animation达成类gif效果的益处在于，图片能够无损，且大家能够很自在地操纵图片动漫的暂停和广播，使用的是：animation-play-state: paused;以此宣称。

你能够狠狠地方击这里：选择CSS3 animation完毕gif动图的间歇和广播demo

点击demo页面包车型客车中止按键，您会意识，直接就停住了，如下截图暗指，截自IE10浏览器：

双入眼击，就能够在制动踏板画面之后持续播放了。进而完毕了小编们对动漫图片的标准调整效果。

此措施看起来完美，可是，1. IE10+等支撑CSS3 animation的浏览器才行；2. 最大的主题素材是图形需假诺团结支配，假如想垄断顾客上传的确实意义的gif图片，只可以……望尘不及……………………吗？

上一篇：没有了下一篇：CSS代码重构与优化，CSS代码重构与优化之路

CSS或JS实现gif动态图片的停止与播放，HTML5和jQuery制作网页灰度图片悬浮效果

CSS或JS实现gif动态图表的甘休与播音

HTML5和jQuery制作网页灰度图片悬浮效果

二、gif图片本人可控前提下的方法风华正茂：多img能源支配管理

相关著作

三、gif图片自个儿可控前提下的办法二：CSS3 animation调控