<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>仿腾讯可全屏图片展示jQuery代码</title>
<style type="text/css">
body {margin:50px 0px; padding:0px; background-color: #000000;color: #ffffff;}
#content {width:620px; margin:0px auto;}
#desc {margin:10px; float:left; font-family: Arial, sans-serif; font-size: 12px;}
</style>
<!-- include CSS always before including js -->
<link type="text/css" rel="stylesheet" href="skins/tn3/tn3.css"></link>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- include tn3 plugin -->
<script type="text/javascript" src="js/jquery.tn3lite.min.js"></script>
<!-- initialize the TN3 when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
//Thumbnailer.config.shaderOpacity = 1;
var tn1 = $('.mygallery').tn3({
skinDir:"skins",
imageClick:"fullscreen",
image:{
maxZoom:1.5,
crop:true,
clickEvent:"dblclick",
transitions:[{
type:"blinds"
},{
type:"grid"
},{
type:"grid",
duration:460,
easing:"easeInQuad",
gridX:1,
gridY:8,
// flat, diagonal, circle, random
sort:"random",
sortReverse:false,
diagonalStart:"bl",
// fade, scale
method:"scale",
partDuration:360,
partEasing:"easeOutSine",
partDirection:"left"
}]
}
});
});
</script>
</head>
<body>
<div id="content">
<div class="mygallery">
<div class="tn3 album">
<h4>源码爱好者</h4>
<div class="tn3 description">www.codefans.net</div>
<div class="tn3 thumb">images/35x35/1.jpg</div>
<ol>
<li>
<h4>源码爱好者</h4>
<div class="tn3 description">www.codefans.net</div>
<a href="images/620x378/1.jpg">
<img src="images/35x35/1.jpg" />
</a>
</li>
<li>
<h4>源码爱好者</h4>
<div class="tn3 description">www.codefans.net</div>
<a href="images/620x378/2.jpg">
<img src="images/35x35/2.jpg" />
</a>
</li>
<li>
<h4>源码爱好者</h4>
<div class="tn3 description">www.codefans.net</div>
<a href="images/620x378/3.jpg">
<img src="images/35x35/3.jpg" />
</a>
</li>
<li>
<h4>源码爱好者</h4>
<div class="tn3 description">www.codefans.net</div>
<a href="images/620x378/4.jpg">
<img src="images/35x35/4.jpg" />
</a>
</li>
<li>
<h4>源码爱好者</h4>
<div class="tn3 description">www.codefans.net</div>
<a href="images/620x378/5.jpg">
<img src="images/35x35/5.jpg" />
</a>
</li>
<li>
<h4>源码爱好者</h4>
<div class="tn3 description">www.codefans.net</div>
<a href="images/620x378/6.jpg">
<img src="images/35x35/6.jpg" />
</a>
</li>
<li>
<h4>源码爱好者</h4>
<div class="tn3 description">www.codefans.net</div>
<a href="images/620x378/7.jpg">
<img src="images/35x35/7.jpg" />
</a>
</li>
<li>
<h4>源码爱好者</h4>
<div class="tn3 description">www.codefans.net</div>
<a href="images/620x378/8.jpg">
<img src="images/35x35/8.jpg" />
</a>
</li>
<li>
<h4>源码爱好者</h4>
<div class="tn3 description">www.codefans.net</div>
<a href="images/620x378/9.jpg">
<img src="images/35x35/9.jpg" />
</a>
</li>
<li>
<h4>源码爱好者</h4>
<div class="tn3 description">www.codefans.net</div>
<a href="images/620x378/10.jpg">
<img src="images/35x35/10.jpg" />
</a>
</li>
<li>
<h4>The Mezquita, Cathedral and former Great Mosque</h4>
<div class="tn3 description">www.codefans.net</div>
<a href="images/620x378/11.jpg">
<img src="images/35x35/11.jpg" />
</a>
</li>
<li>
<h4>源码爱好者</h4>
<div class="tn3 description">www.codefans.net</div>
<a href="images/620x378/12.jpg">
<img src="images/35x35/12.jpg" />
</a>
</li>
</ol>
</div>
</div>
</div>
<div style="clear:both"></div>
</body>
</html>
4355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
