jQuery马赛克过场图片轮播滚动切换特效代码

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

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

以下是 jQuery马赛克过场图片轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery马赛克过场图片轮换</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/jfancytile.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jfancytile.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
	<div id="content">
		<div id="demo1">
			<ul>
				<li><img src="images/01.jpg" /></li>
				<li><img src="images/02.jpg" /></li>
				<li><img src="images/03.jpg" /></li>
				<li><img src="images/04.jpg" /></li>
				<li><img src="images/05.jpg" /></li>
			</ul>
		</div>
</div>		
</div>
</body>
</html>

JS代码(script.js):

/* 酷站代码整理 转载请注明出处 http://www.5icool.org */
$(document).ready(function(){
	// Default$("#demo1").jfancytile();
	// With options$("#demo2").jfancytile({
	inEasing:"easeOutBounce",// from jQuery Easing PluginoutEasing:"easeInCirc",// from jQuery Easing Plugin inSpeed:2000,outSpeed:3500,rowCount:5,columnCount:10,maxTileShift:5}
);
}
);

CSS代码(jfancytile.css):

/* jFancyTile Container */
#demo1 div.jfancytileContainer{background-color:#222;padding:10px;-moz-box-shadow:0 0 5px #222;-webkit-box-shadow:0 0 5px #222;}
/* jFancyTile Title */
#demo1 h3.jfancytileTitle{position:absolute;z-index:999;font:italic 45px Georgia,Times,Serif;color:#F1861A;text-shadow:0px 2px 4px #222;margin:10px 20px;}
/* jFancyTile Navigation - Height will be set dynamically */
#demo1 div.jfancytilenav{width:50px;background-position:center;background-repeat:no-repeat;position:absolute;z-index:99;cursor:pointer;}
/* jFancyTile Forward Navigation */
#demo1 div.jfancytileForward{background-image:url("../images/nav_forward.png")}
/* jFancyTile Backward Navigation */
#demo1 div.jfancytileBack{background-image:url("../images/nav_back.png")}
/* jFancyTile Container */
#demo2{margin:25px;}
#demo2 div.jfancytileContainer{border:5px solid #222;-moz-box-shadow:0 0 10px #222;-webkit-box-shadow:0 0 10px #222;}
/* jFancyTile Title */
#demo2 h3.jfancytileTitle{position:absolute;z-index:999;font:italic 18px Georgia,Times,Serif;color:#000;text-shadow:0px 2px 4px #222;margin:10px 20px;}
/* jFancyTile Navigation - Height will be set dynamically */
#demo2 div.jfancytilenav{width:50px;background-position:center;background-repeat:no-repeat;position:absolute;z-index:99;cursor:pointer;}
/* jFancyTile Forward Navigation */
#demo2 div.jfancytileForward{background-image:url("../images/nav_forward.png")}
/* jFancyTile Backward Navigation */
#demo2 div.jfancytileBack{background-image:url("../images/nav_back.png")}

CSS代码(style.css):

/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input{margin:0;padding:0;}
/* HTML ELEMENTS */
body{background-color:#333;font-family:Georgia,Times,Serif;color:#eee;}
h1{font:bold 65px/60px Helvetica,Arial,Sans-serif;text-align:center;color:#eee;text-shadow:0px 2px 6px #333;}
h1 small{font-size:20px;text-transform:uppercase;letter-spacing:14px;display:block;color:#ccc;}
h2 a{display:block;text-decoration:none;margin:0 0 30px 0;font:italic 45px Georgia,Times,Serif;text-align:center;color:#bfe1f1;text-shadow:0px 2px 6px #333;}
h2 a:hover{color:#90bcd0;}
h4{color:#0DB884;padding:20px;font-size:18px;}
/* COMMON CLASSES */
.break{clear:both;}
/* WRAPPER */
#wrapper{width:800px;margin:20px auto;}
/* CONTENT */
#content{}
#content div#info{padding:20px;}
#content div#info p{padding:10px;}
#content div#info pre{font-size:16px;color:#999;}
#foot_bm a,p,p a{font-size:12px;color:#666;}

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