<!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=utf-8" />
<title>仿京东图片展示</title>
<meta name="Author" content="Silver(wuleying)" />
<meta name="Author mail" content="lolooo(x)live.com" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<script src="js/jquery.jcarousel.pack.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />
<style type = "text/css">
* {margin:0; padding:0;}
body {font-size:12px;}
ul {list-style:none;}
#pro_view {margin:12px;width:780px;}
#pro_infor {height:260px;}
#image_box {float:left;width:350px;height:251px;}
#image_box img {border:1px solid #ccc;width:335px;height:251px;}
#pro_baseinfo {float:left; width:400px;height:251px;}
#image_list {clear:both;height:50px;}
#image_list img {width:50px;height:38px; border:1px solid #ccc; padding:2px;cursor:pointer;}
</style>
<script type="text/javascript">
$(function() {
// 放大镜
var options =
{
zoomWidth: 350,
zoomHeight: 250,
showEffect:'show',
hideEffect:'fadeout',
fadeoutSpeed: 'slow',
title :false
}
$(".jqzoom").jqzoom(options);
// 图片左右滚动
$('#image_list').jcarousel();
// 点击小图更换大图
$('#image_list img:only-child').click(function(){
$('#current_img').attr('src', this.src);
// 大图的命名方式为 小图 + 下划线
$('#current_img').parent().attr('href', this.alt);
});
});
</script>
</head>
<body>
<div id="pro_view">
<div id="pro_infor">
<div id="image_box">
<a href="images/1_.jpg" class="jqzoom" title=""><img src="images/1.jpg" alt="" id="current_img"></a>
</div>
<div id="pro_baseinfo">
右侧内容
</div>
</div>
<ul id="image_list" class="jcarousel-skin-tango">
<li><img src="images/1.jpg" alt="images/1_.jpg" /></li>
<li><img src="images/2.jpg" alt="images/2_.jpg" /></li>
<li><img src="images/3.jpg" alt="images/3_.jpg" /></li>
<li><img src="images/4.jpg" alt="images/4_.jpg" /></li>
<li><img src="images/5.jpg" alt="images/5_.jpg" /></li>
<li><img src="images/6.jpg" alt="images/6_.jpg" /></li>
</ul>
</div>
</body>
</html>
京东放大镜效果多张图片的预览，放大等特效
5星 · 超过95%的资源 需积分: 9 143 浏览量
2010-06-26
13:40:34
上传
评论 2
收藏 1.92MB RAR 举报 
京东放大镜效果.rar （27个子文件） 
css 
jqzoom.css 1KB skins tango skin.css 3KB
movebar.jpg 1KB images 5.jpg 46KB
zoomloader.gif 2KB 3.jpg 4KB 4.jpg 30KB 2.jpg 51KB 2_.jpg 309KB 6_.jpg 265KB 1_.jpg 366KB 1.jpg 62KB Thumbs.db 151KB 6.jpg 20KB 3_.jpg 25KB 5_.jpg 593KB 4_.jpg 131KB js jqzoom.pack.1.0.1.js 9KB thickbox thickbox.css 4KB thickbox.js 10KB jquery.jcarousel.pack.js 9KB jquery.jcarousel.js 29KB jquery.jcarousel.css 915B jquery.jqzoom1.0.1.js 26KB jquery.js 56KB jquery.jcarousel.jsmin.js 14KB
index.html 3KB
wjmtt1000
- 粉丝: 3
- 资源: 15
- 1
- 2
前往页