jquery马赛克拼接翻转效果特效代码

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

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

以下是 jquery马赛克拼接翻转效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery马赛克拼接翻转效果</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/jMask.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js" ></script>
<script type="text/javascript" src="js/GeosansLight_500.font.js"  ></script>
<script type="text/javascript" src="js/raphael-min.js"  ></script>
<script type="text/javascript" src="js/custom.js"  ></script>
<link rel="stylesheet" href="css/style.css" type="text/css"  />
<link rel="stylesheet" href="css/jMask.css" type="text/css"  />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Coming Soon Page</title>
</head>

<body>

<div id="container">

<div id="outerblock">
<div id="innerblock">


<div id="slideshow">
<div>
<ul>
<li><img src="img/im4.jpg" />

<h1 class="title">Image Title 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate neque id diam adipiscing ullamcorper. Nam sed metus et velit rhoncus hendrerit volutpat nec sapien. Nam ut velit laoreet est feugiat porta eu et dolor. 

</p>

</li>
<li><img src="img/im3.jpg" />
<h1 class="title">Image Title 2</h1>
<p>
Lorem ipsum dolor sit amet, m adipiscing ullamcorper. Nam sed metus et velit rhoncus hendrerit volutpat nec sapien. Nam ut velit laoreet est feugiat porta eu et dolor. 

</p>

</li>
<li><img src="img/im2.jpg" />

<h1 class="title">Image Title 3</h1>
<p>
image 3  ,Lorem ipsum dolor sit amet, m adipiscing ullamcorper. Nam sed metus et velit rhoncus hendrerit volutpat nec sapien. Nam ut velit laoreet est feugiat porta eu et dolor. 

</p>

</li>
<li><img src="img/im1.jpg" />
<h1 class="title">Image Title 4</h1>
<p>
image 4  ,Lorem ipsum dolor sit amet, m adipiscing ullamcorper. Nam sed metus et velit rhoncus hendrerit volutpat nec sapien. Nam ut velit laoreet est feugiat porta eu et dolor. 

</p>
</li>

</ul>
</div>
</div>
<span id="ribbon-left"></span>

</div>

<div id="frame">
</div>

</div>
<img src="css/i/shadow.png" class="grid_10" id="shadow" />
</div>
</body>
</html>

JS代码(custom.js):

// JavaScript DocumentCufon.replace('h1');
	$(function(){
	var div = Raphael("frame",701,401);
	div.rect(0,0,700,400,15).attr({
	fill:"90-#e1e1e1-#ffffff",stroke:"#e7e7e7"}
);
	$("#slideshow").jMask({
	width:680,height:380}
);
}
);

CSS代码(jMask.css):

@charset "utf-8";/* CSS Document */
/*Classes used by the library */
.active{position:absolute;z-index:10;}
/* Class for element at top */
.reset{position:absolute;z-index:4;}
/* Class for the rest of the elements */
#jMask-stage ul{list-style:none;display:block;margin:0px;padding:0px;float:left;}
#jMask-stage ul li{position:absolute;display:block;overflow:hidden;}
#jMask-stage ul img{position:absolute;}

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
h1{font-size:36px;}
body{background:#ffffff url(i/auraslice.jpg) repeat-x top;}
#container{margin-left:auto;margin-right:auto;width:960px}
#outerblock{position:relative;z-index:2;margin:50px;}
#innerblock{position:absolute;z-index:999;}
#slideshow{padding:10px;}
#innerblock #ribbon-left{background:url(i/ribbonleft.png) no-repeat bottom left;width:28px;height:72px;position:absolute;margin-top:-160px;margin-left:-18px;}
#innerblock .title{position:absolute;background:url(i/ribbon-slice.png) repeat-x;border-right:1px solid #185381;border-top:1px solid #185381;border-bottom:1px solid #185381;padding:0px 4px 7px 0px;display:none;color:#fff;height:44px;margin-top:238px;z-index:3;}
#innerblock p{position:absolute;width:630px;padding:10px 25px 10px 25px;text-align:justify;font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;background:url(i/desc-overlay.png);margin-top:300px;z-index:2;display:none;line-height:20px;}
#shadow{margin-top:-120px;margin-left:20px}
#slideshow ul{list-style:none;}

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