<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />
<style type="text/css">
.curr_base {
border:1px solid #ccc;
}
.cur_on {
border:2px solid #82acd5;
}
</style>
<title>wy</title>
</head>
<body>
<table>
<tr>
<td style="width:355px;height:251px;">
<div id="BigImage" class="jqzoom" style="border:1px solid #ccc">
<img id="_middleImage" src="images/middle/moto.jpg" width="349" longdesc="images/big/moto.jpg"/>
</div>
</td>
</tr>
<tr>
<td><ul id="mycarousel" class="jcarousel-skin-tango">
<li><img class="curr_base" style="width:50px;height:38px;" src="images/small/moto.jpg" name="moto.jpg"/></li>
<li><img class="curr_base" style="width:50px;height:38px;" src="images/small/p1.jpg" name="p1.jpg"/></li>
<li><img class="curr_base" style="width:50px;height:38px;" src="images/small/p2.jpg" name="p2.jpg"/></li>
<li><img class="curr_base" style="width:50px;height:38px;" src="images/small/p3.jpg" name="p3.jpg"/></li>
<li><img class="curr_base" style="width:50px;height:38px;" src="images/small/p4.jpg" name="p4.jpg"/></li>
<li><img class="curr_base" style="width:50px;height:38px;" src="images/small/p6.jpg" name="p6.jpg"/></li>
</ul></td>
</tr>
</table>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom1.0.2.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mycarousel").jcarousel({initCallback:mycarousel_initCallback});
$(".jqzoom").jqueryzoom({
xzoom:320,
yzoom:240,
offset:10,
position:"right",
preload:1,
lens:1
});
});
function mycarousel_initCallback(carousel){
$("#mycarousel li").mouseover(function(){
var JQ_img = $("img", this);
var image_name = JQ_img.attr("name");
$("#_middleImage").attr("src", "images/middle/" + image_name).attr("longdesc", "images/big/" + image_name);
$(this).siblings().each(function(){
$("img", this).removeClass().addClass("curr_base");
})
JQ_img.addClass("cur_on");
})
};
</script>
</body>
</html>
商品图片放大镜效果（类似淘宝）
5星 · 超过95%的资源 需积分: 10 196 浏览量
2013-01-09
21:01:08
上传
评论 4
收藏 732KB RAR 举报 
买卖提商品图片放大镜效果.rar （29个子文件） 
买卖提商品图片放大镜效果 买卖提商品图片放大镜效果 css 
jquery.jcarousel.css 3KB jqzoom.css 654B
mymyty_wy.html 2KB images 
zoomloader.gif 2KB big 
p2.jpg 27KB p1.jpg 59KB moto.jpg 366KB p6.jpg 57KB p3.jpg 18KB p4.jpg 27KB middle p2.jpg 7KB p1.jpg 16KB moto.jpg 62KB p6.jpg 13KB p3.jpg 5KB p4.jpg 8KB movebar.jpg 2KB Thumbs.db 111KB small 新建文件夹 p2.jpg 942B p1.jpg 2KB p1_.jpg 1KB moto.jpg 2KB Thumbs.db 8KB p6.jpg 1KB p3.jpg 1009B p4.jpg 1KB js jquery-1.3.2.min.js 56KB jquery.jcarousel.js 29KB jquery.jqzoom1.0.2.js 4KB
- 1
- 2
- 3
- 4
- 5
前往页