|
|
|
<!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 ><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"><img src="trees/t3.jpg" alt="" /><div><h1>Title Three</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/t4.jpg" alt="" /><div><h1>Title Four</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/t5.jpg" alt="" /><div><h1>Title Five</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/t6.jpg" alt="" /><div><h1>Title Six</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/t7.jpg" alt="" /><div><h1>Title Seven</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/t8.jpg" alt="" /><div><h1>Title Eight</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/t9.jpg" alt="" /><div><h1>Title Nine</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/t10.jpg" alt="" /><div><h1>Title Ten</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/t11.jpg" alt="" /><div><h1>Title Eleven</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/t12.jpg" alt="" /><div><h1>Title Twelve</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/t13.jpg" alt="" /><div><h1>Title Thirteen</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/t14.jpg" alt="" /><div><h1>Title Fourteen</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/t15.jpg" alt="" /><div><h1>Title Fifteen</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/t16.jpg" alt="" /><div><h1>Title Sixteen</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/t17.jpg" alt="" /><div><h1>Title Seventeen</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/t18.jpg" alt="" /><div><h1>Title Eighteen</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/t19.jpg" alt="" /><div><h1>Title Nineteen</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></ul></div><div id="fullSize"></div> </div><br clear="all" /><br><br><div align="center"><script language="javascript" src="http://www.sharejs.com/js/720.js"></script><br><br>获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com">http://www.sharejs.com</a></div></body></html> |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡