2顶

京东商城产品内页多图切换放大镜预览特效

稿源：互联网 2022-04-02 21:40:38 点击： 11780 撤稿纠错

带左右按钮jquery多图切换显示特效，鼠标经过图片放大显示，非常实用的商城商品图片放大预览特效。

以下讨论的是和图片切换放大镜相关的京东商城产品内页多图切换放大镜预览特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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" />
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！" />
<title>站长特效 京东商城产品内页多图切换放大镜预览特效 站长特效网</title>
<style type="text/css">
#wwwzzjsnet{ float:none; margin:20px auto; text-align:center; width:500px;}
.jqzoom{ width:350px; height:350px; position:relative;}
.zoomdiv{ left:859px; height:400px; width:400px;}
.list-h li{ float:left;}
#spec-n5{width:350px; height:56px; padding-top:6px; overflow:hidden;}
#spec-left{ background:url(/img/left_20110119zzjs_net.gif) no-repeat; width:10px; height:45px; float:left; cursor:pointer; margin-top:5px;}
#spec-right{background:url(/img/right_20110119zzjs_net.gif) no-repeat; width:10px; height:45px; float:left;cursor:pointer; margin-top:5px;}
#spec-list{ width:325px; float:left; overflow:hidden; margin-left:2px; display:inline;}
#spec-list ul li{ float:left; margin-right:0px; display:inline; width:62px;}
#spec-list ul li img{ padding:2px ; border:1px solid #ccc; width:50px; height:50px;}
/*jqzoom*/
.jqzoom{position:relative;padding:0;}
.zoomdiv{z-index:100;position:absolute;top:1px;left:0px;width:400px;height:400px;border:1px solid #e4e4e4;display:none;text-align:center;overflow: hidden;}
.bigimg{width:800px;height:800px;}
.jqZoomPup{z-index:10;visibility:hidden;position:absolute;top:0px;left:0px;width:50px;height:50px;border:1px solid #aaa;background:#FEDE4F 50% top no-repeat;opacity:0.5;-moz-opacity:0.5;-khtml-opacity:0.5;filter:alpha(Opacity=50);cursor:move;}
#spec-list{ position:relative; width:322px; margin-right:6px;}
#spec-list div{ margin-top:0;margin-left:-30px; *margin-left:0;}
</style>
<SCRIPT src="/img/jquery_zzjs.js" type=text/javascript></SCRIPT>
<SCRIPT src="/img/base.js" type=text/javascript></SCRIPT>
</head>
<body style="text-align:center">
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

需要加载js文件，请刷新页面后看效果！
<div id=wwwzzjsnet>
 <div class=jqzoom id=spec-n1 onClick="window.open('http://www.zzjs.net')"><IMG height=350 src="/img/img04_20110119zzjs_net.jpg" jqimg="/img/img04_20110119zzjs_net.jpg" width=350>
 </div>
 <div id=spec-n5>
  <div class=control id=spec-left>
   <img src="/img/left_20110119zzjs_net.gif" />
  </div>
  <div id=spec-list>
   <ul class=list-h>
    <li><img src="/img/img01_20110119zzjs_net.jpg"> </li>
    <li><img src="/img/img02_20110119zzjs_net.jpg"> </li>
    <li><img src="/img/img03_20110119zzjs_net.jpg"> </li>
    <li><img src="/img/img04_20110119zzjs_net.jpg"> </li>
    <li><img src="/img/img01_20110119zzjs_net.jpg"> </li>
    <li><img src="/img/img02_20110119zzjs_net.jpg"> </li>
    <li><img src="/img/img03_20110119zzjs_net.jpg"> </li>
    <li><img src="/img/img04_20110119zzjs_net.jpg"> </li>
    <li><img src="/img/img01_20110119zzjs_net.jpg"> </li>
    <li><img src="/img/img02_20110119zzjs_net.jpg"> </li>
    <li><img src="/img/img03_20110119zzjs_net.jpg"> </li>
    <li><img src="/img/img04_20110119zzjs_net.jpg"> </li>
   </ul>
  </div>
  <div class=control id=spec-right>
   <img src="/img/right_20110119zzjs_net.gif" />
  </div>
    </div>
</div>
<SCRIPT type=text/javascript>
$(function(){
   $(".jqzoom").jqueryzoom({
 xzoom:400,
 yzoom:400,
 offset:10,
 position:"right",
 preload:1,
 lens:1
});//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 $("#spec-list").jdMarquee({
 deriction:"left",
 width:350,
 height:56,
 step:2,
 speed:4,
 delay:10,
 control:true,
 _front:"#spec-right",
 _back:"#spec-left"
});//欢迎来到站z长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 $("#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"
 });
});
})//欢迎来到站长z特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</SCRIPT>
<SCRIPT src="/img/lib_20110119zzjs_net.js" type="text/javascript"></SCRIPT>
</body>
</html>

关于京东商城产品内页多图切换放大镜预览特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011012467128.shtml方便下次再访问哦。

·上一篇： jquery焦点图切换样式随机改变特效
·下一篇： jquery+css制作漂亮带按钮五屏焦点图切换特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

京东商城产品内页多图切换放大镜预览特效

文章分类LIST >>返回首页

最新游戏

最新新闻