产品多图展示带放大镜代码

最新推荐文章于 2021-12-12 12:53:39 发布

会做饭的技术男

最新推荐文章于 2021-12-12 12:53:39 发布

阅读量240

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hjchik1ihikj.html

版权

前端专栏收录该内容

2508 篇文章 12 订阅

订阅专栏

点击下面链接查看效果：
http://keleyi.com/a/bjad/pmryuvga.htm

本效果只适合jquery 1.9.0以下的版本，例如1.8.3（http://keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js）。

代码如下：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>产品多图展示带放大镜代码 - 柯乐义</title>
  6 <link href="http://keleyi.com/keleyi/phtml/jqtexiao/19/css/css.css" type="text/css" rel="stylesheet">
  7 <script src="http://keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js" type="text/javascript"></script>
  8 <script src="http://keleyi.com/keleyi/phtml/jqtexiao/19/js/base.js" type="text/javascript"></script>
  9 </head>
 10 <body>
 11 <div align="center">
 12 <div id="preview">
 13 <div class="jqzoom" id="spec-n1" onclick="window.open('http://keleyi.com/a/bjad/pmryuvga.htm')">
 14 <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">
 15 </div>
 16 <div id="spec-n5">
 17 <div class="control" id="spec-left">
 18 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/left.gif" />
 19 </div>
 20 <div id="spec-list">
 21 <ul class="list-h">
 22 <li>
 23 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img01.jpg">
 24 </li>
 25 <li>
 26 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img02.jpg">
 27 </li>
 28 <li>
 29 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img03.jpg">
 30 </li>
 31 <li>
 32 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img04.jpg">
 33 </li>
 34 <li>
 35 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img05.jpg">
 36 </li>
 37 <li>
 38 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img06.jpg">
 39 </li>
 40 <li>
 41 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img07.jpg">
 42 </li>
 43 <li>
 44 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img08.jpg">
 45 </li>
 46 <li>
 47 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img09.jpg">
 48 </li>
 49 <li>
 50 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img10.jpg">
 51 </li>
 52 <li>
 53 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img11.jpg">
 54 </li>
 55 </ul>
 56 </div>
 57 <div class="control" id="spec-right">
 58 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/right.gif" />
 59 </div>
 60 </div>
 61 </div>
 62 <script type="text/javascript">
 63 $(function () {
 64 $(".jqzoom").jqueryzoom({
 65 xzoom: 400,
 66 yzoom: 400,
 67 offset: 10,
 68 position: "right",
 69 preload: 1,
 70 lens: 1
 71 });
 72 $("#spec-list").jdMarquee({
 73 deriction: "left",
 74 width: 350,
 75 height: 56,
 76 step: 2,
 77 speed: 4,
 78 delay: 10,
 79 control: true,
 80 _front: "#spec-right",
 81 _back: "#spec-left"
 82 });
 83 $("#spec-list img").bind("mouseover", function () {
 84 var src = $(this).attr("src");
 85 $("#spec-n1 img").eq(0).attr({
 86 src: src.replace("\/n5\/", "\/n1\/"),
 87 jqimg: src.replace("\/n5\/", "\/n0\/")
 88 });
 89 $(this).css({
 90 "border": "2px solid #ff6600",
 91 "padding": "1px"
 92 });
 93 }).bind("mouseout", function () {
 94 $(this).css({
 95 "border": "1px solid #ccc",
 96 "padding": "2px"
 97 });
 98 });
 99 })
100 </script>
101 <script src="http://keleyi.com/keleyi/phtml/jqtexiao/19/js/lib.js" type="text/javascript"></script>
102 <script src="http://keleyi.com/keleyi/phtml/jqtexiao/19/js/keleyi.js" type="text/javascript"></script>
103 </div>
104 <div style="text-align: center; clear: both">
105 <p>
106 适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
107 <p>
108 来源：<a href="http://keleyi.com/" target="_blank">柯乐义</a></p>
109 </div>
110 </body>
111 </html>

web前端：http://www.cnblogs.com/jihua/p/webfront.html

会做饭的技术男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
产品多图展示带放大镜代码

点击下面链接查看效果：http://keleyi.com/a/bjad/pmryuvga.htm本效果只适合jquery 1.9.0以下的版本，例如1.8.3（http://keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js）。代码如下： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr.
复制链接

扫一扫