购物系统 - Select 关联价格产品图片产品属性同时变化，附带产品图放大镜功能 img_jqzoom

weixin_40892413

已于 2022-06-14 19:55:13 修改

阅读量93

点赞数

文章标签： php js

于 2022-06-14 19:53:20 首次发布

本文链接：https://blog.csdn.net/weixin_40892413/article/details/125284693

版权

外贸自建站，从小白开始学习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">&lt;</a> <a class="next">&gt;</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;}

如需封装好的完整代码，请留言