chengyu2099
- 浏览: 458702 次
- 性别:
- 来自: 南京
-
文章分类
最新评论
-
fkbld：
楼主给个密码，谢谢了，baild_zr@126.com
ExtJs direct 推送 DEMO -
文思涌动：
你的方法太好用了，感激不尽。
MyEclipse 安装ADT -
zys08：
...
jquery uploadify -
攻城使：
我现在也在学习使用Uploadfiy，摸索中
jquery uploadify -
gksrxn：
liuyulovely 写道怎么解压还要密码，楼主解压的密码是 ...
ExtJs direct 推送 DEMO
<!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">
<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>
- 大小: 251.1 KB
分享到：
评论
2 楼
chengyu2099
2011-05-17
我只是作为笔记， 自己看的，你多情了
1 楼
ligh820
2011-03-18
javaeye 不成文规定
1, 有预览地址
2, 有源码下载
看来你的这篇文章还有改进的地方!
1, 有预览地址
2, 有源码下载
看来你的这篇文章还有改进的地方!
发表评论
-
jquery uploadify
2012-06-13 18:21 4645使用jquery uploadify组件的时候遇到上传成功 ... -
javascript 单元格互换值
2011-05-23 17:57 1456<%@ page language="ja ... -
json-jquery-struct 解析例子(map) - 批量导入解析和批量导出
2011-04-21 16:12 19531、点击批量导入，先做个弹出层 弹出层里面选择文件 ... -
弹出窗口 ymPrompt API
2011-04-14 15:59 1294http://wenku.baidu.com/view/a05 ... -
jquery tabs 面板
2010-11-19 11:06 1087<%@ page language="java ... -
jquery - tags 百度样式的动态提示
2010-11-18 18:27 1285<%@ page language="ja ... -
jQuery 弹出层
2010-11-06 18:43 1213<%@ page language="java ... -
jquery 鼠标移动，连接提示
2010-11-01 16:36 1395jQuery(document).ready(functi ... -
jquery-实现拖拽功能
2010-09-28 18:17 947jqueryui.com - demo - sorttable ... -
js操作table，实现拖拽，保存顺序思路
2010-09-27 15:03 1995<%@ page language="java ... -
js 验证的样式 有点EXT味道
2010-07-23 09:25 970if('SUCCESS'=='${SUCCESS}') ... -
正则表达式 验证表单 regular
2010-04-30 09:48 1242<title>表单验证类 Validator ... -
js 滚动图片
2010-04-12 12:43 2040<!-- *********************** ... -
showDialog 窗口模式
2010-03-09 11:35 1217var url = 'orderInfor.jsp'; ... -
jQuery Ajax
2010-03-05 14:31 1026var data = 'id='+id; $.aja ... -
jQuery获取表单值
2010-02-07 10:06 6838获取所有SELECT值 //获取所有属性值 var it ... -
js 操作 json
2010-02-06 10:28 1086var data = 'id='+$('#menuThr ... -
js 选择提示 confirm
2010-01-27 16:02 1189if(window.confirm('确定删除?')) ... -
JS 提示输入字符数
2010-01-27 14:06 988<script type="text/ja ... -
JS 提示输入字符数
2010-01-27 14:05 1006<script type="text/ja ...
相关推荐
jQuery图片相册点击缩略图弹出大图预览特效是一款缩略图排列，鼠标点击小图的时候弹出层显示大图，带切换按钮与关闭按钮的js特效代码。
jquery图像幻灯片全屏图片相册点击缩略图片放大查看预览 jquery图像幻灯片全屏图片相册点击缩略图片放大查看预览 jquery图像幻灯片全屏图片相册点击缩略图片放大查看预览
thumbnail-scroller是一款非常实用的jQuery多功能滚动预览缩略图特效插件。该滚动预览缩略图可以单独使用，也可以和lightbox或图片画廊等一起使用。它通过点击前后导航按钮或将鼠标放在长条缩略图上进行前后图片预览...
jquery图片切换带缩略图片滚动切换
jquery特效,jquery焦点图,jquery图片轮换,jquery相册效果,焦点图实例,淘宝焦点图代码下载,{keyword},JS广告代码,JS特效代码
点击“上一张”或“下一张”可查看对应大图，点击小图可查看对应大图，可滚动轮换展示，大图展示时小图当前高亮展示，各浏览器都兼容。
jQuery左右图片自动滚动特效，滚动图片数量不限，js已经做了自动判断，当低于滚动数量时，取消自动滚动。
一个非常好用的图片预览DEMO，有缩略图,支持左右键点击事件,AJAX,修改源码可进行分页查询
jquery四屏带缩略图滚动焦点图是一款带缩略图带箭头滚动，对应banner大图切换的焦点图代码。
jQuery-图片轮换
jquery slides带右侧缩略图和标题文字的图片相册幻灯片 jquery slides带右侧缩略图和标题文字的图片相册幻灯片 jquery slides带右侧缩略图和标题文字的图片相册幻灯片
jQuery点击缩略图显示大图切换效果代码基于jquery-1.4.2.min.js制作，点击缩略图显示图文并茂的大图，带箭头按钮图标，控制缩略图和大图切换。
jQuery仿QQ空间鼠标悬停长图片滚动预览全图
jQuery点击缩略图片滚动切换大图片详情展示，供大家一起共同分享学习。
jquery实时缩略图加载显示
jquery新闻图片轮换，需要加入jquery基类
非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等,可以做为你的学习设计参考。 jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 jQuery+CSS实用图片收缩与放大效果...
带滚动缩略图的全屏jQuery相册代码
jquery图片滚动特效，制作单排列表图片左右滚动，鼠标滑过图片放大展示，图片左右滚动，图片滚动到最后一张，按钮失去焦点的jQuery图片滚动。jQuery下载。
jQuery图片折叠轮换代码，可以点击左右箭头按钮切换图片，漂亮简洁。兼容主流浏览器，phplearn初学者推荐下载！ 使用方法： 1、head区域引用文件 jquery.min.js，chuxz.css 2、在文件中加入<!-- 代码 开始 --><!...