gifplayer暂停或播放GIF图片jquery特效代码

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

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

以下是 gifplayer暂停或播放GIF图片jquery特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>gifplayer</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/gifplayer.css">
	<link rel="stylesheet" href="css/examples.css">
</head>

<body id="home">
<center>
	<main class = "main options">
		<section>
			<img id="banana" src="img/banana.png" data-gif="img/banana-animated.gif" class="gifs"/><br>
		</section>

		<section>
				<h2>Code example</h2>
			</section>
			
			<section>    
				<img id="cheetah" src="img/cheetah.png" class="gifs"/><br>
				<img id="mario" src="img/mario.png" class="gifs"/>
			</section>
		</main>
		<script src="js/jquery-1.10.2.min.js"></script>
		<script src="js/jquery.gifplayer.js"></script>
		<script src="js/index.js"></script>
</center>
</body>
</html>

JS代码(index.js):

$(document).ready( function(){
	$('.gifs').gifplayer();
}
);

CSS代码(examples.css):

body{font-family:"Helvetica Neue",Arial,sans-serif;font-size:14px;}
a,a:hover,a:visited{color:#666;}
.logo{width:150px;height:86px;display:inline-block;background-image:url(../img/logo.png);position:absolute;left:500px;top:20px;}
.logo a{color:#fff;position:relative;top:25px;left:35px;}
h1{font-size:24px;margin-bottom:15px;}
h2{font-weight:bold;margin-bottom:10px;}
.main{margin:40px;}
section{display:inline-block;width:100%;}
.options section{margin:20px 0;}
.example{float:left;margin:0 10px;}
ol{list-style-type:decimal;}
hr{margin:20px 0;color:#ddd;background-color:#ddd;height:2px;border:none;}
.code{width:650px;}
table.options th{font-weight:bold;color:#999;text-align:left;}
table.options thead{border-bottom:1px solid #ccc;}
table.options th,td{padding:5px 10px 5px 5px;}
table.options td:first-child{color:navy;}

CSS代码(reset.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

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