jQuery Gif图片播放和暂停插件js特效代码

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

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

以下是 jQuery Gif图片播放和暂停插件js特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Gif图片播放和暂停插件 </title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel='stylesheet' id='jquery-gif-css'  href='css/jquery.gif.css' type='text/css' media='all' />

</head>
<body>
<div class="zzsc-content">
	<img src="img/1.jpg" alt="GIF Loader" data-gif="img/1.gif" class="gif">
	<img src="img/2.jpg" alt="GIF Loader" data-gif="img/2.gif" class="gif">
</div>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/jquery.gif.min.js"></script>
<script type="text/javascript">
	$( document ).ready(function() {
	
		// swap all the gifs on the page.
		$('.gif').each(function() {
		  $(this).gif();
		});

	  });
</script>
</body>
</html>

JS代码(jquery.gif.min.js):

!function(a){
	"use strict";
	a.fn.gif=function(){
	var b=a(this).attr("src"),c=a(this).data("gif"),d="img",e=!1;
	if(void 0!=c){
	a(this).wrap("<div class='gif-loader'></div>");
	var f=a(this).parent(),g=a("<a/>",{
	html:'<span class="fa fa-play fa-5x"></span>'}
).appendTo(f);
	a(f).data("row_parent",this),a(f).on("click",function(b){
	void 0!=b&&b.preventDefault(),a(this).data("row_parent").swap()}
),this.swap=function(){
	"img"==d?e?this.setState("gif"):this.loadGIF():"gif"==d&&this.setState("img")}
,this.setState=function(f){
	d=f,"img"==d?(a(this).attr("src",b),a(g).html('<span class="fa fa-play fa-5x"></span>')):"gif"==d?(e=!0,a(this).attr("src",c),a(g).html('<span class="fa fa-pause fa-5x"></span>')):"loading"==d&&(e=!1,a(g).html('<span class="fa fa-circle-o-notch fa-spin fa-2x"></span>'))}
,this.loadGIF=function(){
	this.setState("loading");
	var b=new Image;
	b.src=c,a(b).data("row_parent",this),b.onload=function(){
	a(this).data("row_parent").setState("gif")}
}
}
}
}
(jQuery);

CSS代码(zzsc.css):

body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
.zzsc-container{margin:0 auto;}
.zzsc-content{padding:2em 0;text-align:center;}

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