您的位置:首页 - jQuery
jquery产品多图展示带放大镜


点击下面链接查看效果:
http://keleyi.com/keleyi/phtml/jqtexiao/19.htm

本效果只适合jquery 1.9.0以下的版本,例如1.8.3(http://keleyi.com/keleyi/pmedia/jquery-1.8.3.min.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=utf-8" />
<title>产品多图展示带放大镜代码 - 柯乐义</title>
<link href="http://keleyi.com/keleyi/phtml/jqtexiao/19/css/css.css" type="text/css" rel="stylesheet">
<script src="http://keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://keleyi.com/keleyi/phtml/jqtexiao/19/js/base.js" type="text/javascript"></script>
</head>
<body>
<div align="center">
<div id="preview">
<div class="jqzoom" id="spec-n1" onclick="window.open('http://keleyi.com/a/bjad/pmryuvga.htm')">
<img height="350" src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img05.jpg" jqimg="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img05.jpg" width="350">
</div>
<div id="spec-n5">
<div class="control" id="spec-left">
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/left.gif" />
</div>
<div id="spec-list">
<ul class="list-h">
<li>
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img01.jpg">
</li>
<li>
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img02.jpg">
</li>
<li>
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img03.jpg">
</li>
<li>
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img04.jpg">
</li>
<li>
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img05.jpg">
</li>
<li>
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img06.jpg">
</li>
<li>
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img07.jpg">
</li>
<li>
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img08.jpg">
</li>
<li>
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img09.jpg">
</li>
<li>
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img10.jpg">
</li>
<li>
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img11.jpg">
</li>
</ul>
</div>
<div class="control" id="spec-right">
<img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/right.gif" />
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".jqzoom").jqueryzoom({
xzoom: 400,
yzoom: 400,
offset: 10,
position: "right",
preload: 1,
lens: 1
});
$("#spec-list").jdMarquee({
deriction: "left",
width: 350,
height: 56,
step: 2,
speed: 4,
delay: 10,
control: true,
_front: "#spec-right",
_back: "#spec-left"
});
$("#spec-list img").bind("mouseover", function () {
var src = $(this).attr("src");
$("#spec-n1 img").eq(0).attr({
src: src.replace("\/n5\/", "\/n1\/"),
jqimg: src.replace("\/n5\/", "\/n0\/")
});
$(this).css({
"border": "2px solid #ff6600",
"padding": "1px"
});
}).bind("mouseout", function () {
$(this).css({
"border": "1px solid #ccc",
"padding": "2px"
});
});
})
</script>
<script src="http://keleyi.com/keleyi/phtml/jqtexiao/19/js/lib.js" type="text/javascript"></script>
<script src="http://keleyi.com/keleyi/phtml/jqtexiao/19/js/keleyi.js" type="text/javascript"></script>
</div>
<div style="text-align: center; clear: both">
<p>
适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>
来源:<a href="http://keleyi.com/" target="_blank">柯乐义</a></p>
</div>
</body>
</html>
本站导航
相关文章
柯乐义 Copyright© keleyi.com