购物系统 - Select 关联价格 产品图片 产品属性 同时变化，附带产品图放大镜功能 img_jqzoom
厍光霁
外贸自建站，从小白开始学习php, 从了解zencart 改装zencart 开始，到现在自己使用 Bootstrap框架自建外贸独立站购物系统，产品属性关联价格，同时产品属性关联图片 这个功能一直是我想实现的。从网上查了很多也没发现有直接能够使用的，也试着从购物网站摘下来再使用，都失败了。一直以来只实现了，图片单独切换，不会随客户选择不同型号产品变化。对大牛来说不是问题，对我来说有点困难。
今天我就把自己的半瓶子作品挂出，希望能帮到有这个需求的小白
html
<!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" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<link rel="stylesheet" href="style/base.css" >
<title>select，产品价格，属性，和图片一起变化</title>
</head>
<script type="text/javascript">
function settab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
function outputCart() {
var out = document.getElementsByName('productso')[0].value;
document.getElementsByName('amount')[0].value = out;
var up_num = document.getElementById('opse').options[document.getElementById('opse').selectedIndex].title;
var num = up_num.toLowerCase();
document.getElementsByName('item_number')[0].value = up_num;
document.getElementById("heading").src = 'images/'+num+'.jpg';
}
// --></script>
<style>
.container{ margin:10rem; width:80%;}
#shopping_cart{ width:inherit; margin:- auto; text-align:center;}
#select_img{ display:block; position:absolute; }
#select_img img{ width:320px;}
#opse{ height:2rem; margin:1rem auto 1rem -15rem;}
#shopping_cart #item_number,#shopping_cart #amount{ background:none; border:none; outline:none; color:red; font-weight:bolder;}
#shopping_cart #item_number:active input{background:none; border:none;}
#show_cart{ margin-left:-15rem;}
#show_price {color:#F00; font-weight:bolder; margin-top:10rem;}
#show_price span{ margin-left:-5rem;}
</style>
<div class="container ">
<div style="width:49%; float:left;">
<div id="preview" class="spec-preview">
<div id="select_img" style="">
<span class="jqzoom">
<img id="heading" jqimg="images/m/eclhp0002k.jpg" src="images/m/eclhp0002k.jpg" />
</span>
</div></div>
<!--缩图开始-->
<div class="spec-scroll"> <a class="prev"><</a> <a class="next">></a>
<div class="items">
<ul>
<li><img alt="HP 393945-001 AC Adapter" bimg="images/eclhp0002k.jpg" src="images/m/eclhp0002k.jpg" onmousemove="preview(this);"></li>
<li><img alt="HP 393945-001 AC Adapter" src="images/m/eclhp0002k_01.jpg" bimg="images/eclhp0002k_01.jpg" onmousemove="preview(this);"></li>
<li><img alt="HP 393945-001 AC Adapter" src="images/m/eclhp0002k_02.jpg" bimg="images/eclhp0002k_02.jpg" onmousemove="preview(this);"></li>
</ul>
</div>
</div>
</div>
<div id="shopping_cart" style="font-family:Arial; width:30%; float:left;">
<div id="show_price" ><span >USD $</span>
<input name="amount" id="amount" value="43.32" readonly="readonly"></div>
<select name="productso" id="opse" onChange="outputCart()">
<option title='ECLHP0002K' selected='selected' value='43.32'> 65W - AC100-240V</option>
<option title="ECLHP0002K01" value="45.51">90W - AC 100-240V</option>
<option title="ECLHP0002K02" value="48.22">65W - DC Car Charger</option>
</select>
<input name="item_number" id="item_number" type="hidden" value="ECLHP0002K" readonly="readonly">
<div id="show_cart"><span >Quantity: </span>
<input type="text" name="quantity" size="1" value="1" >
<button name="submit" class="btn btn-outline-danger add_to_cart" alt="add to cart" style=" ">Add to Cart</button> </div>
</div>
</div>
<body>
</body>
</html>js 部分使用了网路搜索到的一些 来自 *作者：动力启航(谢凯) *网址：http://www.it134.cn
CSS样式如下
@charset "utf-8";
/* CSS Document */
/* Clear Fix */
/* End hide from IE Mac */
/* end of clearfix */
/*页面全局结束*/
.tab{ overflow:hidden; }
.tab li,.tab a,.tab-item{cursor:pointer;float:left;text-align: center;}
.m, .mt, .mc, .mb{overflow:hidden;}
.mt .extra{float: right;}
.right-extra { width:37%; background:#FFF; float:left;}
.right-extra .mt{height:28px;line-height:28px;padding:0 10px 8px;border-top:1px solid #EED97C;background:url(../images/bg_hotsale.gif) repeat-x 0 -552px;color:#c00;}
.right-extra .tab{border-bottom:2px solid #BE0000;margin-bottom:10px;}
.right-extra .tab li{position:relative;height:24px;padding:3px 12px 0;background:url(../images/icon_clubs.gif) #ccc no-repeat right -150px;overflow:hidden;margin-right:3px;line-height:24px;font-size:14px;font-weight:bold;color:#c30;}
.right-extra .tab span{position:absolute;left:0;top:0;z-index:1;width:10px;height:27px;background:url(../images/icon_clubs.gif) no-repeat 0 -150px;}
.right-extra .tab a{float:none;color:#c30;}
.right-extra .tab .curr{background-position:right -178px;color:#fff;}
.right-extra .tab .curr span{background-position:0 -178px;}
.right-extra .tab .curr a{color:#fff;}
.right-extra .mc .extra{padding:5px 10px;border-top:1px solid #F3E6C6;}
.right-extra .total{float:right;}
.right-extra .total strong{color:#FF7403;}
.right-extra .total a:link,.right-extra .total a:visited{color:#005aa0;}
.right-extra .join a:link,.right-extra .join a:visited{color:#FF7604;}
.right-extra .norecode{padding:0 10px 10px;}
.right-extra .iloading{margin-bottom:10px;}
/*评论列表*/
/*图片放大镜样式*/
.jqzoom{float:left;border:none;position:relative;padding:0px;cursor:pointer;margin:0px;display:block;}
.zoomdiv{z-index:100;position:absolute;top:0px;left:0px;width:352px;height:352px;background:#ffffff; border:5px solid #CCC;display:none;text-align:center;overflow:hidden; box-shadow: 0.3em 0.2em 0.3em rgba(0.5, 0.5, 0.5, 0.5);}
.jqZoomPup{z-index:10;visibility:hidden;position:absolute;top:0px;left:0px;width:120px !important;height:120px !important;border:1px solid #aaa;background:#ffffff /*url(../images/zoom.png) 50% center no-repeat*/;opacity: 0.5;-moz-opacity: 0.5;-khtml-opacity: 0.5;filter: alpha(Opacity=50);}
/*图片小图预览列表*/
.spec-preview{width:325px;height:325px;border:3px solid #DFDFDF; box-shadow: 0.3em 0.2em 0.3em rgba(0.5, 0.5, 0.5, 0.5);}
.spec-scroll{clear:both;margin:5px auto auto 2rem;width:272px; float:left;}
.spec-scroll .prev{float:left;margin-right:4px;}
.spec-scroll .next{float:right;}
.spec-scroll .prev, .spec-scroll .next{display:block;font-family:Arial;text-align:center;width:13px;height:60px; line-height:60px;background:#666; cursor:pointer;text-decoration:none; color:#FFF; box-shadow: 0.1em 0.1em 0.2em rgba(0.5, 0.5, 0.5, 0.5); font-weight:bolder; font-size:1rem;}
.spec-scroll a:hover{ background:#FF6600 !important;}
.spec-scroll .items{float:left;position:relative;width:242px;height:64px;overflow:hidden;}
.spec-scroll .items ul{position:absolute;width:999999px;height:60px; list-style:none; padding:0; margin:0;}
.spec-scroll .items ul li{float:left;width:60px;text-align:center; padding:0; margin:0; box-shadow: 0.1em 0.1em 0.2em rgba(0.5, 0.5, 0.5, 0.5);}
.spec-scroll .items ul li img{border:1px solid #CCC;padding:2px;width:60px;height:60px; }
.spec-scroll .items ul li img:hover{border:2px solid #FF6600;padding:1px;}如需封装好的完整代码，请留言
类似资料：