【4】JS美淘網(wǎng)電商項目部分效果實現(xiàn)：購物車，手風琴，登錄注冊，放大鏡【詩書畫唱】
商品詳情界面：
CSS部分：
<style>
*{
margin: 0px;padding: 0px;font-size: 10px;
}
ul{
list-style: none;
}
#SPall{
width: 1000px; height: 800px;margin: 0px auto;position: relative;
}
#SPtop1{
width: 1000px; height: 30px;
}
#SPtopLeft{
width: 100px;position: absolute;left: 50px; height: 30px;
line-height: 30px;
}
#SPtopLeft a{
text-decoration: none;color: black;font-size:10px;font-weight: bold;
}
#SPright{
width: 400px; position: absolute;right: 50px; height: 30px; line-height: 30px;
}
#SPright span{
display: inline-block;margin-left: 15px;position: relative;
}
#SPright span a{
color: black;text-decoration: none;display: block;
}
#SPright span a:hover{
color: orange;
}
#SPright span ul{
display: none;position: absolute;left: 0px; top: 20px;list-style: none;z-index: 10;
}
#SPright span ul li{
height: 20px;
}
.SPgouWuChe{
background-image: url(./img/1.jpg); padding-left: 15px;background-repeat: no-repeat;
background-position: 0px 8px;
}
#SPtop2{
width: 1000px; height: 80;position: relative;
}
#SPtop2Left{
width: 330px;position: absolute;left: 10px; top: 10px;
}
#SPtop2Right{
width: 450px;position: absolute;left:auto; top: 10px;right: 50px;height: 80px;z-index: 6;
}
#SPtop2Right form input[type="text"]{
background-image: url(./img/放大鏡.jpg);background-repeat: no-repeat;
height: 40px;font-size: 20px;width: 250px;padding-left: 40px;
}
#SPtop2Right form input[type="submit"]{
width: 100px; height: 43px;background-color: yellow;border: 1px solid yellow;
margin-left: -2px;
}
#SPtop2Right form a{
color: gray;margin-left:10px;text-decoration: none;
}
/*#dade_daohangtiao{
position: fixed;left: 0px;top: 110px;width: 100%; height: 35px; background-color: orange;
z-index: 0;
}*/
#SPbigTouBu{
position: fixed;z-index: 20;background-color: white;width: 1003px;height: 145px;
}
/* #SPbigTouBu中設置為固定定位*/
#SPdaoHangTiao{
width: 100%;height: 35px; background-color: orange;position: absolute;left: 0px;top: 110px;
z-index: 1;
}
#SPdaoHangTiao ul{
list-style: none;
}
#SPdaoHangTiao ul li{
float: left;width: 130px;height: 35px;line-height: 35px;text-align: center;
? }
? #SPdaoHangTiao ul li:hover{
? background-color: green;
? }
? #SPdaoHangTiao ul li a{
? font-size: 20px;text-decoration: none;color: white;font-weight: bold;
? }
? #SPdaoHangTiao ul li a:hover{
? color: red;
? }
? #div_lunbotu{
? width: 1000px; height: 300px; position: absolute;top: 145px;
? }
? #div_lunbotu div{
? position: absolute;right: 20px; bottom: 10px; width: 150px;
? height: 35px;
? }
? #div_lunbotu div span{
? width: 25px; height: 25px; background-color: yellow;border-radius:50%;display: inline-block;
? margin-left: 10px;border: 2px solid yellow;
? }
? #div_lunbotu div .spanxuanzhong{
? background-color: green;
? }
? .erduo{
? background-image: url(./img/jiantou.jpg);background-repeat: no-repeat;
? width: 40px; height: 80px;position: absolute;left: 50px; top: 50%;margin-top: -50px;opacity: 0.3;
? }
? .youerduo{
? left: auto;right: 50px; transform: rotate(180deg);
? }
? .erduo:hover{
? opacity: 0.8;
? }
? .create_li{
? width: 150px; color: green; font-size: 18px;height: 22px;font-weight: bold;margin-top: 10px;
? }
? #shangpinqu{
? position: absolute;left: 0px; top: 445px;width: 1000px;height: 600px;
? }
? #div_xianshimiaosha{
? width: 200px;height: 500px; background-image: url(./img/限時秒殺.jpg);background-position: 0px 0px;
? background-repeat: no-repeat;background-size: 195px 200px;position: absolute;left: 0px; top: 0px;
? padding-top: 100px;
? }
? #youceshangpin_biaoti{
? width: 800px;height: 30px;font-size: 25px;font-weight: bold;color: red;
? }
? #div_xianshimiaosha li{
? width: 200px;height: 100px;overflow: hidden;
? }
? #youceshangpin{
? width: 800px;height: 600px;position: absolute;left: 200px;top:0px;
? font-size: 14px;color: gray;
? }
? #youceshangpin dl{
? width: 182px;height: 182px; float: left;overflow: hidden;margin: 3px 5px;border: 1px solid white;
? text-align: center;
? }
? #youceshangpin dl a img{
? width: 122px;height: 122px;
? }
? #youceshangpin dl a{
? text-decoration: none;
? }
? #youceshangpin dl:hover{
? border: 1px solid red;width: 182px;height: 182px;
? }
? .yuanjia{
? font-size: 16px; color: gray; text-decoration: line-through;
? }
? .zhehoujia{
? font-size: 20px; color: red;?
? }
? #dibubanquan{
? position: absolute;left: 0px;top: 1900px;
? }
? #sp2{
? width: 1000px; height: 830px;position: absolute;left: 0px;top: 1045px;
? }
? #cainixihuan{
? width:1000px;height:30px;
? color: red;font-size: 25px;
? }
? #sp2 dl{
? width: 182px;height: 182px; float: left;overflow: hidden;margin: 3px 5px;border: 1px solid white;
? text-align: center;border: 1px solid white;
? }
? #sp2 dl a{
? text-decoration: none;
? }
? #sp2 dl:hover{
? width: 190px;height: 182px;border: red solid 1px;
? }
? #zuocefield{
? position: fixed;left: 10px;top: 50%;width: 100px;height: 250px;border: 1px solid red;
? background-color: yellow;margin-top: -125px;
? }
? #div_close{
? background-image: url(./img/guanbi.png);position: absolute;right: 0px;top: 0px;width: 20px;
? height: 20px;z-index: 10;background-size: 20px 20px;cursor: pointer;
? }
? #zuocefield_ul{
? position: absolute;left: 0px;top: 20px;list-style: none;
? }
? #zuocefield_ul li{
? width: 100px;height: 40px;line-height: 40px;text-align: center;
? }
? #zuocefield_ul li:hover{
? background-color: orange;
? }
? #zuocefield_ul li a{
? text-decoration: none;font-size: 20px;
? }
#zhezhaoceng{
width: 100%;height: 100%;opacity: 0.6;background-color: black;z-index: 30;position: fixed;
left: 0px;top: 0px;display: none;
}
#dl{
width: 500px;height: 300px;background-color: white;z-index: 40;position: fixed;left: 50%;
top: 50%;margin-left: -250px;margin-top: -150px;display: none;
}
#dl_close{
width: 30px;height: 30px;position: absolute;right:5px;top:5px;
background-image: url(./img/guanbi.png);cursor: pointer;
}
#dl_biaoti{
width: 100px;height: 50px;border: 1px solid gray;text-align: center;line-height: 50px;
position: absolute;left: 70px;top: 20px;font-size: 20px;font-weight: bold;color: gray;
}
#dl_neirong{
position: absolute;left: 70px;top: 70px;border: 1px solid gray;width: 350px;height: 170px;
}
#tb1{
margin-left: 50px;width: 250px;height: 170px; margin: 0px auto;color: red;
}
#tb1 tr td{
font-size: 15px;
}
#tb1 tr td input[type="text"]{
width: 150px;height: 30px;font-size: 15px;
}
#tb1 tr td input[type="password"]{
width: 150px;height: 30px;font-size: 15px;
}
#tb1 tr td input[type="button"]{
width: 70px;height: 30px;border: 1px solid gray;background-color:gray;opacity: 0.7;
font-size: 15px;color: white;margin-left: 20px;cursor: pointer;
}
#SPul li{
border: 1px yellow solid;width: 50px;height: 20px;line-height: 20px;
}
#zhuce{
width: 500px;height: 500px; position: absolute;
top: 160px;left: 50%;margin-left: -200px;border: 1px solid gray;
}
#yh_zhuce{
font-size: 25px;width: 150px; margin: 20px auto;text-align: center;
}
#zhuce_neirong{
width: 400px;height: 300px;margin: 0px auto;
}
#zhuce_neirong table tr{
height: 60px;
}
#zhuce_neirong table tr td{
font-size: 20px;
}
#zhuce_neirong .wenbenkuang{
width: 180px; height: 25px;font-size: 15px;
}
#zhuce_neirong .btn{
width: 70px; height: 30px;margin-left: 50px;
}
#zhuce_neirong select{
height: 30px;
}
#SPshangPinXiangQing{
width: 1000px; border: 1px solid red;height: 400px;position: absolute;left: 0px;top: 145px;
}
#SPshangPinXiangQingBiaoTi{
width: 100%;height: 35px;background-color: antiquewhite;font-size: 15px;line-height: 35px;
color: gray;
}
#div_xiaotupian {
position: absolute;left: 20px;bottom: 10px;
}
#div_xiaotupian img{
width: 50px; height: 50px;display: inline-block; margin: 4px 8px;
cursor: pointer;
}
#SPshangPinXiangQingLeft{
width: 400px; height: 350px;position: absolute;left: 0px;top: 50px;
}
#div_img{
width: 250; height: 250px;position: absolute;left: 50px;top: 10px;border: 1px solid green;
}
#div_img img{
width: 250px; height: 250px;
}
#div_spbiaoti{
width: 100%;height: 35px;line-height: 35px;color: red;font-size: 25px;
}
#div_xq_right{
position: absolute;left: 450px;top: 50px;width: 550px;height: 350px;
}
.span_jiage1{
font-size: 18px;color: gray;
}
#div_xq_right div{
margin: 20px auto;
}
.shuliang_btn{
width: 30px;height: 30px;
}
.shualing_text{
width: 40px;height: 20px;font-size: 20px;
}
#div_gwc{
width: 150px; height: 50px;background-color: red;line-height: 50px;text-align: center;
font-size: 25px;color: white;position: absolute;left: 30px;cursor: pointer;
}
#div_xq_bottom{
width: 1000px; border: 1px solid red;height: 1300px;position: absolute;
left: 0px;top: 550px;
}
.div_xq_bottom_div1{
width: 100px;height: 50px; text-align: center;line-height: 50px;color: white;font-size: 20px;
background-color: red;float: left;margin: 0px 1px;cursor: pointer;
}
#div_xq_bottom_div4{
position: absolute;left: 0px;top: 50px;
}
#div_xq_bottom_div4 img{
display: block;margin: 0px 100px;width: 800px;
}
#div_xq_bottom_div5{
width: 1000px; position: absolute;left: 0px;top: 50px;background-color: red;display: none;
height: 1600px;
}
#div_xq_bottom_div6{
width: 1000px; position: absolute;left: 0px;top: 50px;background-color: green;display: none;
height: 1600px;
}
</style>
<link? rel="stylesheet" href="css/jqzoom.css" />
JS和HTML部分：
下面只有這樣寫才可以保存到專欄了，準確的看截圖：
1：
link? rel="stylesheet" href="css/jqzoom.css"
2：————————————————————
src="js/js_spxiangqing.js"
3：————————————————————
src="js/jquery.jqzoom1.0.1.js"
4：————————————————————————
?src="js/jquery-1.3.2.min.js"
5：——————————————————————————
src="js/jqzoom.pack.1.0.1.js"
<script type="text/javascript">
? $(function(){
var setting={zoomType:"reverse",
? ? ? ? ? ? ? ? zoomWidth:300,
zoomHeight:300,
? ? ? ? ? ? ? ? xOffset:20,
yOffset:20,
lens:true,
title:true,
imageOpacity:0.5
? ? ? ? ? ?};
$(".zoom").jqzoom(setting);
? });
? ?
? ?
? window.onload=function(){
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? //關閉彈出的登錄
window.inputs=document.getElementById("tb1").getElementsByTagName("input");
inputs[3].onclick=guanbidl;
window.dl_close.onclick=guanbidl;
var a_dl=document.getElementById("SPdengLu");
a_dl.onclick=kaiqidl;
//打開登錄和遮罩層
function kaiqidl(){
var zhezhaoceng=document.getElementById("zhezhaoceng");
zhezhaoceng.style.display="block";
var dl=document.getElementById("dl");
dl.style.display="block";
}
//關閉登錄和遮罩層
function guanbidl(){
var zhezhaoceng=document.getElementById("zhezhaoceng");
zhezhaoceng.style.display="none";
var dl=document.getElementById("dl");
dl.style.display="none";
}?
//我的信息
var div_top_right=document.getElementById("SPright");
var div_top_right_spans=div_top_right.children;
div_top_right_spans[1].onmouseover=function(){
this.children[1].style.display="block";
}
div_top_right_spans[1].onmouseout=function(){
this.children[1].style.display="none";
}
//智能搜索框
var input_texts=["手機充電器","手機充電器","手機殼","手機貼膜"];
var input_texts_div=document.getElementById("SPtop2Right");
var input_text=document.getElementById("SPtop2Right").getElementsByTagName("input")[0];
var div_tishikuang=document.getElementById("div_sousuokuang");
input_text.onkeyup=function(){
var kong_arr=[];
var neirong=this.value;
for(var i of input_texts){
if(i.indexOf(neirong)==0){
kong_arr.push(i);
}
}
console.log(kong_arr);
if(input_text.value==""){
input_texts_div.removeChild(input_texts_div.children[1]);
var input_c_ul=document.createElement("ul");
input_c_ul.style.border="0px solid red";
input_texts_div.appendChild(input_c_ul);
}else{
if(div_tishikuang){
input_texts_div.removeChild(input_texts_div.children[1]);
//kong_arr.length=0;
console.log(div_tishikuang);
var input_c_ul=document.createElement("ul");
input_c_ul.style.border="1px solid red";
for(var i of kong_arr){
var input_c_li=document.createElement("li");
var input_c_li_text=document.createTextNode(i);
input_c_li.className="create_li";
input_c_li.appendChild(input_c_li_text);
input_c_ul.appendChild(input_c_li);
}
input_texts_div.appendChild(input_c_ul);
}
}
}
// 點擊小圖給大圖
var smallimgs=document.getElementById("div_xiaotupian").getElementsByTagName("img");
var bigimg=document.getElementById("div_img").children;
for(var i of smallimgs){
i.onclick=function(){
var dizhi=this.getAttribute("src");
bigimg[0].href=dizhi;
var tup=bigimg[0].children;
tup[0].src=dizhi;
}
}
//評論區(qū)切換
var div_pls=document.getElementsByClassName("div_xq_bottom_div1");
var div_pl4=document.getElementById("div_xq_bottom_div4");
var div_pl5=document.getElementById("div_xq_bottom_div5");
var div_pl6=document.getElementById("div_xq_bottom_div6");
for(var i of div_pls){
if(i.innerHTML=="商品詳情"){
i.onclick=function(){
div_pl5.style.display="none";
div_pl6.style.display="none";
div_pl4.style.display="block";
}
}else if(i.innerHTML=="商品規(guī)格"){
i.onclick=function(){
div_pl5.style.display="block";
div_pl6.style.display="none";
div_pl4.style.display="none";
}
}else if(i.innerHTML=="評論"){
i.onclick=function(){
div_pl5.style.display="none";
div_pl6.style.display="block";
div_pl4.style.display="none";
}
}
}
}
? ?
</script>-->
</head>
<body>
<!--開頭為兩個大寫的字母的時候就會更容易重命名。-->
<div id="SPall">
<div id="SPbigTouBu">
<div id="SPtop1">
<!--如果重命名失敗就重新取一個更容易，更短等的重命名等。-->
<div id="SPtopLeft"><a href="#">江西【切換城市】</a></div>
<div id="SPright">
<span>美淘，每天淘一次</span>
<span>
<a href="#">我的美淘</a>
<ul id="SPul">
<li><a href="#">我的訂單</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">我的余額</a></li>
</ul>
</span>
<span><a href="#" class="SPgouWuChe">購物車</a></span>
<span><a href="#" id="SPdengLu">【登錄】</a></span>
<span><a href="zhuce.html">【注冊】</a></span>
</div>
</div>
<div id="SPtop2">
<div id="SPtop2Left"><img src="img/meitao_log.jpg"></div>
<div id="SPtop2Right">
<form action="#" method="#">
<table>
<tr>
<td><input type="text"? align="top"/></td>
<td><input type="submit" value="搜索" /></td>
</tr>
<tr>
<td colspan="2">
<a href="#">美的熱水器</a>
<a href="#">利浦電動牙刷</a>
<a href="#">美的電飯煲</a>
<a href="#">格力士微波爐</a>
</td>
</tr>
</table>
</form>
<div id="div_sousuokuang">
</div>
</div>
</div>
<div id="SPdaoHangTiao">
<ul>
<li><a href="zhuJieMian.html">首頁</a></li>
<li><a href="#">團購</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">電影</a></li>
<li><a href="#">KTV</a></li>
<li><a href="#">酒店訂票</a></li>
<li><a href="#">購物</a></li>
</ul>
</div>
</div>
<div id="SPshangPinXiangQing">
<div id="SPshangPinXiangQingBiaoTi"> 商品詳情</div>
<div id="SPshangPinXiangQingLeft">
<div id="div_img">
? <a href="img/xq1.jpg" class="zoom">
? <img src="img/xq1.jpg" title="放大鏡" /> </a>
</div>
<div id="div_xiaotupian">
<img src="img/xq1.jpg" />
<img src="img/xq2.jpg" />
<img src="img/xq3.jpg" />
<img src="img/xq4.jpg" />
<img src="img/xq5.jpg" />
</div>
</div>
<div id="div_xq_right">
<div id="div_spbiaoti">oppo22經(jīng)典5G手機，照亮你的美</div>
<div id="div_yuanjia">
<span class="span_jiage1">原價：</span><span class="span_jiage2"?
style="color: red; font-size: 25px;">￥1099</span>
</div>
<div id="div_miaosha">
<span class="span_jiage1">秒殺預告,11.11日限時秒殺:</span>
<span class="span_jiage2" style="color: red; font-size: 25px;">￥899</span>
</div>
<div>
<span class="span_jiage1">購買數(shù)量:</span>
<input class="shuliang_btn" type="button" value="-" />
<input type="text" class="shualing_text" disabled="disabled" value="1" />
<input class="shuliang_btn" type="button" value="+" />
</div>
<div id="div_gwc">
立即購買
</div>
</div>
<div>
</div>
</div>
<div id="div_xq_bottom">
<div class="div_xq_bottom_div1">商品詳情</div>
<div class="div_xq_bottom_div1">商品規(guī)格</div>
<div class="div_xq_bottom_div1">評論</div>
<div id="div_xq_bottom_div4">
<img src="img/sj1.jpg" />
<img src="img/sj2.jpg" />
<img src="img/sj3.jpg" />
</div>
<div id="div_xq_bottom_div5"></div>
<div id="div_xq_bottom_div6"></div>
</div>
<div id="zhezhaoceng">
</div>
<div id="dl">
<div id="dl_close"></div>
<div id="dl_biaoti">用戶登錄</div>
<div id="dl_neirong">
<form action="#" method="post">
<table? id="tb1">
<tr>
<td width="100px">用戶名:</td>
<td width="100px"><input type="text"></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="password"></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="登錄" />
<input type="button" value="取消" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>-->
