jQuery js 图片替换显示 缩略图 滚动预览小图的相册
日期：2014-05-16 浏览次数：20434 次
jQuery js 图片轮换显示 缩略图 滚动预览小图的相册
<!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实现带侧边滚动预览小图的相册 - 分享JavaScript-sharejs.com</title>
<style type="text/css">
#gallery {width:750px; margin:0 auto;}
#thumbnails {width:100px; height:250px; overflow:auto; float:right; margin:10px 0;}
#thumbnails img {display:block; width:50px; height:50px; float:left; padding:3px; cursor:pointer;}
#thumbnails ul {margin:0; padding:0; list-style:none;}
#thumbnails ul li div {display:none;}
#fullSize {width:600px; font-family:georgia, serif; border:1px solid #aaa; background:#fff;}
#fullSize img {display:block; margin:10px auto; width:auto; padding:1px; background:#000;}
#fullSize div {background:#fff; margin:0 auto; text-align:left; padding:10px 0;}
#fullSize div h1 {font-size:18px; padding:5px 0; margin:0;}
#fullSize div p {font-size:12px; line-height:1.6em; color:#000; padding:5px 0; margin:0;}
</style>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
/* ================================================================
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */
/* <![CDATA[ */
$(document).ready(function(){
/* show first image and information */
firstStr = $('.thumb');
showStr = firstStr.html();
showDiv(showStr)
$('.thumb').children(":first") .css("background", "#000");
/* monitor mouse clicks */
$('.thumb').click(function(){
$('.thumb img') .css("backgroundColor", "#fff");
$(this).children(":first") .css("background", "#000");
htmlStr = $(this).html();
/* swap images and information */
$('#fullSize div') .slideUp(500);
$('#fullSize img') .animate({"width": "1px"}, 400)
.animate({"height": "0px"}, 400, function(){showDiv(htmlStr)});
});
/* show image and information */
function showDiv (htmlStr) {
$('#fullSize') .html(htmlStr);
$('#fullSize img') .hide();
$('#fullSize div') .hide();
imgWidth = ($('#fullSize img').outerWidth());
imgHeight = ($('#fullSize img').outerHeight());
$('#fullSize div') .css("width",imgWidth + "px");
$('#fullSize img') .css("height", "1px")
.css("width", "1px")
.animate({"height": imgHeight}, 400)
.animate({"width": imgWidth}, 400, function(){showInfo()});
}
function showInfo () {
$('#fullSize div') .slideDown(750);
}
});
/* ]]> */
</script>
</head>
<body onload="enlarge()">
<div id="gallery">
<div id="thumbnails">
<ul id="innerContainer">
<li class="thumb">
<img src="trees/t1.jpg" alt="" />
<div>
<h1>Title One</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li class="thumb">
<img src="trees/t2.jpg" alt="" />
<div>
<h1>Title Two</h1>
<p>Some descriptive text can be placed here along with any other piece of information that can be styled using CSS.<br />The <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn=">jQuery</a> routine is just used to read the information from the 'thumb' li and write it to the 'fullSize' div.</p>
</div>
</li>
<li class="thumb">
<
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
