JS防止自动播放gif图片特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 JS防止自动播放gif图片特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!doctype html>
<html>
<head>
    <title>JS防止自动播放gif图片</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
        body {
            font-size: 20px;
            font-family: Georgia;
            margin: 0;
            padding: 40px 0 40px 0;
            text-align: center;
        }

        small {
            display: block;
            width: 600px;
            text-align: center;
            margin: 30px auto;
        }

        section {
            width: 600px;
            margin: 0 auto;
        }

        hr {
            max-width: 900px;
            border-bottom: none;
            margin: 20px auto 10px auto;
        }

        .image-big {
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1>Gifffer</h1>
    <small>Just click on the image below. <br />It's paused in the beginning of the animated Gif.</small>
    <hr />
    <section>
        <p>12.6kb Gif<br />&lt;img data-gifffer="image.gif" /></p>
        <img data-gifffer="images/giffer3.gif" />
    </section>
    <hr />
    <section>
        <p>12.6kb Gif<br />&lt;img data-gifffer="image.gif" /></p>
        <img data-gifffer="images/giffer3.gif" class="image-big" />
    </section>
    <hr />
    <section>
        <p>12.6kb Gif<br />&lt;img data-gifffer="image-big.gif"<br />data-gifffer-width="250" data-gifffer-height="237" /></p>
        <img data-gifffer="images/giffer3.gif" data-gifffer-width="250" data-gifffer-height="237" class="image-big" />
    </section>
    <hr />
    <script type="text/javascript" src="js/gifffer.js"></script>
    <script>
        window.onload = function () {
            Gifffer();
        }
    </script>
</body>
</html>

JS代码(gifffer.min.js):

var Gifffer=function(){
	var images,d=document,ga="getAttribute",sa="setAttribute";
	images=d&&d.querySelectorAll?d.querySelectorAll("[data-gifffer]"):[];
	var createContainer=function(w,h,el){
	var con=d.createElement("DIV"),cls=el[ga]("class"),id=el[ga]("id");
	cls?con[sa]("class",el[ga]("class")):null;
	id?con[sa]("id",el[ga]("id")):null;
	con[sa]("style","position:relative;
	cursor:pointer;
	width:"+w+"px;
	height:"+h+"px;
	");
	var play=d.createElement("DIV");
	play[sa]("style","width:60px;
	height:60px;
	border-radius:30px;
	background:rgba(0,0,0,0.3);
	position:absolute;
	left:"+(w/2-30)+"px;
	top:"+(h/2-30)+"px;
	");
	var trngl=d.createElement("DIV");
	trngl[sa]("style","width:0;
	height:0;
	border-top:14px solid transparent;
	border-bottom:14px solid transparent;
	border-left:14px solid rgba(0,0,0,0.5);
	position:absolute;
	left:26px;
	top:16px;
	");
	play.appendChild(trngl);
	con.appendChild(play);
	el.parentNode.replaceChild(con,el);
	return{
	c:con,p:play}
}
;
	var process=function(el){
	var url,con,c,w,h,play,gif,playing=false,cc,isC;
	url=el[ga]("data-gifffer");
	w=el[ga]("data-gifffer-width");
	h=el[ga]("data-gifffer-height");
	el.style.display="block";
	c=document.createElement("canvas");
	isC=!!(c.getContext&&c.getContext("2d"));
	if(w&&h&&isC)cc=createContainer(w,h,el);
	el.onload=function(){
	if(isC){
	w=w||el.width;
	h=h||el.height;
	if(!cc)cc=createContainer(w,h,el);
	con=cc.c;
	play=cc.p;
	con.addEventListener("click",function(){
	if(!playing){
	playing=true;
	gif=d.createElement("IMG");
	gif[sa]("style","width:"+w+"px;
	height:"+h+"px;
	");
	gif[sa]("data-uri",Math.floor(Math.random()*1e5)+1);
	setTimeout(function(){
	gif.src=url}
,0);
	con.removeChild(play);
	con.removeChild(c);
	con.appendChild(gif)}
else{
	playing=false;
	con.appendChild(play);
	con.removeChild(gif);
	con.appendChild(c);
	gif=null}
}
);
	c.width=w;
	c.height=h;
	c.getContext("2d").drawImage(el,0,0,w,h);
	con.appendChild(c)}
}
;
	el.src=url}
;
	for(var i=0;
	i<images.length;
	i++)process(images[i])}
;

附件:下载该文件资源,减少时间成本(增值服务)