【1】JS美淘網(wǎng)電商項(xiàng)目部分效果實(shí)現(xiàn)：購物車，手風(fēng)琴，登錄注冊(cè)，放大鏡【詩書畫唱】
JS美淘網(wǎng)電商項(xiàng)目部分效果實(shí)現(xiàn)：購物車，手風(fēng)琴，登錄注冊(cè)，放大鏡
主機(jī)界面：
CSS部分：
<style>
*{
margin: 0px;padding: 0px;font-size: 10px;
}
ul{
list-style: none;
}
/* list:表*/
/* list-style: none;去除li的小圓點(diǎn)*/
#ZJguDingCenter{
width: 1000px; height: 800px;margin: 0px auto;position: relative;
}
/*position 英[p??z??n]美[p??z??n]n. 位置*/
/*#guDingCenter1是設(shè)置頭部固定的所有區(qū)域,fixed為國定的意思*/
/*relative 英[?rel?t?v]
美[?rel?t?v]
adj. 相比較而言的; 比較的; 相對(duì)的*/
#ZJguDingCenter1{
position: fixed;
/*fixed 英[f?kst]
美[f?kst]
adj. 固定的*/
z-index: 20;background-color: white;width: 1000px;height: 145px;
/*z-index 屬性指定一個(gè)元素的堆疊順序。
擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
每個(gè)元素默認(rèn)z-index為0。哪個(gè)元素的z-index的值更大就更在疊在上面。
*/
}
#ZJguDingCenter1-1{
width: 1000px; height: 30px;position: relative;
}
#ZJguDingCenter1-1-1{
width: 100px;position: absolute;left: 50px; height: 30px;
line-height: 30px;
}
/*
absolute
絕對(duì)
英 [?abs?lu?t]
美 [??bs??lut]*/
#ZJguDingCenter1-1-1 a{
text-decoration: none;color: black;font-size:10px;font-weight: bold;
}
#ZJguDingCenter1-1-2{
width: 400px; position: absolute;right: 50px; height: 30px; line-height: 30px;
}
#ZJguDingCenter1-1-2 span{
display: inline-block;margin-left: 15px;position: relative;
}
#ZJguDingCenter1-1-2 span a{
color: black;text-decoration: none;display: block;
}
#ZJguDingCenter1-1-2 span a:hover{
color: orange;
}
#ZJguDingCenter1-1-2 span ul{
display: none;position: absolute;left: 0px; top: 20px;list-style: none;z-index: 10;
}
#ZJguDingCenter1-1-2 span ul li{
height: 20px;
}
#ZJguDingCenter1-2{
width: 1000px; height: 80;position: relative;
}
#ZJguDingCenter1-2-1{
width: 330px; position: absolute;left: 10px; top: 10px;
}
#ZJguDingCenter1-2-2{
width: 450px; position: absolute;left:auto; top: 10px;right: 50px;height: 80px;z-index: 6;
}
/* padding-left: 40px;用來設(shè)置圖片和輸入文字不重在一起,用form是方便提交地址等*/
#ZJguDingCenter1-2-2 form input[type="text"]{
background-image: url(./img/放大鏡.jpg);background-repeat: no-repeat;
height: 40px;font-size: 20px;width: 250px;padding-left: 40px;
}
/*form
形成常用釋義
英 [f??m]美 [f?rm]
n.
形狀;輪廓;存在形式;表現(xiàn)形式;種類;類型;常規(guī);規(guī)矩;表格;年級(jí);競(jìng)技狀態(tài);長(zhǎng)板凳;窩*/
#ZJguDingCenter1-2-2 form input[type="submit"]{
width: 100px; height: 43px;background-color: yellow;border: 1px solid yellow;
margin-left: -2px;
}
#ZJguDingCenter1-2-2 form a{
color: gray;margin-left:10px;text-decoration: none;
}
#ZJguDingCenter1-3{
position: fixed;
left: 0px;top: 110px;width: 100%; height: 35px; background-color: orange;
z-index: 0;
}
#ZJguDingCenter1-3{
width: 100%;height: 35px; background-color: orange;position: absolute;left: 0px;top: 110px;
z-index: 1;
}
#ZJguDingCenter1-3 ul{
list-style: none;
}
#ZJguDingCenter1-3 ul li{
float: left;width: 130px;height: 35px;line-height: 35px;text-align: center;
? }
? #ZJguDingCenter1-3 ul li:hover{
? background-color: green;
? }
? #ZJguDingCenter1-3 ul li a{
? font-size: 20px;text-decoration: none;color: white;font-weight: bold;
? }
? #ZJguDingCenter1-3 ul li a:hover{
? color: red;
? }
? #ZJguDingCenter2{
? width: 1000px; height: 300px; position: absolute;top: 145px;
? }
? #ZJguDingCenter2 div{
? position: absolute;right: 20px; bottom: 10px; width: 150px;
? height: 35px;
? }
? #ZJguDingCenter2 div span{
? width: 25px; height: 25px; background-color: yellow;border-radius:50%;display: inline-block;
? margin-left: 10px;border: 2px solid yellow;
? }
? #ZJguDingCenter2 div .spanxuanzhong{
? background-color: green;
? }
.ZJgouWuCheImg{
background-image: url(./img/1.jpg); padding-left: 15px;background-repeat: no-repeat;
background-position: 0px 8px;
}
? .ZJerduo{
? 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;
? }
? .ZJyouerduo{
? left: auto;right: 50px; transform: rotate(180deg);
? }
? .ZJerduo:hover{
? opacity: 0.8;
? }
? .ZJcreateLi{
? width: 150px; color: green; font-size: 18px;height: 22px;font-weight: bold;margin-top: 10px;
? }
?
?
? #ZJguDingCenter3{
? position: absolute;left: 0px; top: 445px;width: 1000px;height: 600px;
? }
? #ZJguDingCenter3-1{
? width: 200px;height: 500px; background-image: url(./img/限時(shí)秒殺.jpg);background-position: 0px 0px;
? background-repeat: no-repeat;background-size: 195px 200px;position: absolute;left: 0px; top: 0px;
? padding-top: 100px;
? }
? #ZJguDingCenter3-2_biaoti{
? width: 800px;height: 30px;font-size: 25px;font-weight: bold;color: red;
? }
? #ZJguDingCenter3-1 li{
? width: 200px;height: 100px;overflow: hidden;
? }
? #ZJguDingCenter3-2{
? width: 800px;height: 600px;position: absolute;left: 200px;top:0px;
? font-size: 14px;color: gray;
? }
? #ZJguDingCenter3-2 dl{
? width: 182px;height: 182px; float: left;overflow: hidden;margin: 3px 5px;border: 1px solid white;
? text-align: center;
? }
? #ZJguDingCenter3-2 dl a img{
? width: 122px;height: 122px;
? }
? #ZJguDingCenter3-2 dl a{
? text-decoration: none;
? }
? #ZJguDingCenter3-2 dl:hover{
? border: 1px solid red;width: 182px;height: 182px;
? }
? .ZJguDingCenter4YuanJia{
? font-size: 16px; color: gray; text-decoration: line-through;
? }
? .ZJzheHouJiaWenZi{
? font-size: 20px; color: red;?
? }
? #ZJguDingCenter5{
? position: absolute;left: 0px;top: 1900px;
? }
? #ZJguDingCenter4{
? width: 1000px; height: 830px;position: absolute;left: 0px;top: 1045px;
? }
? #ZJguDingCenter4Like{
? width:1000px;height:30px;
? color: red;font-size: 25px;
? }
? #ZJguDingCenter4 dl{
? width: 182px;height: 182px; float: left;overflow: hidden;margin: 3px 5px;border: 1px solid white;
? text-align: center;border: 1px solid white;
? }
? #ZJguDingCenter4 dl a{
? text-decoration: none;
? }
? #ZJguDingCenter4 dl:hover{
? width: 190px;height: 182px;border: red solid 1px;
? }
? #ZJguDingLeft{
? position: fixed;left: 10px;top: 50%;width: 100px;height: 250px;border: 1px solid red;
? background-color: yellow;margin-top: -125px;
? }
? #ZJguDingLeftCloseImg{
? 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;
? }
?
?
?
? /*html文件中: url(./img/guanbi.png)? ?css文件中:url(../img/guanbi.png)*/
? #ZJguDingLeftUl{
? position: absolute;left: 0px;top: 20px;list-style: none;
? }
? #ZJguDingLeftUl li{
? width: 100px;height: 40px;line-height: 40px;text-align: center;
? }
? #ZJguDingLeftUl li:hover{
? background-color: orange;
? }
? #ZJguDingLeftUl li a{
? text-decoration: none;font-size: 20px;
? }
#ZJzheChaoCeng{
width: 100%;height: 100%;opacity: 0.6;background-color: black;z-index: 30;position: fixed;
left: 0px;top: 0px;display: none;
}
#ZJDengLuBuFen{
width: 500px;height: 300px;background-color: white;z-index: 40;
position: fixed;
left: 50%;
top: 50%;margin-left: -250px;margin-top: -150px;display: none;
}
#ZJDengLuBuFen1{
width: 30px;height: 30px;position: absolute;right:5px;top:5px;
background-image: url(./img/guanbi.png);cursor: pointer;
}
#ZJDengLuBuFen2{
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;
}
#ZJDengLuBuFen3{
position: absolute;left: 70px;top: 70px;border: 1px solid gray;width: 350px;height: 170px;
}
#ZJxiaLaNeiRong li{
border: 1px yellow solid;width: 50px;height: 20px;line-height: 20px;
}
#ZJDengLuBiaoGe{
margin-left: 50px;width: 250px;height: 170px; margin: 0px auto;color: red;
}
#ZJDengLuBiaoGe tr td{
font-size: 15px;
}
#ZJDengLuBiaoGe tr td input[type="text"]{
width: 150px;height: 30px;font-size: 15px;
}
#ZJDengLuBiaoGe tr td input[type="password"]{
width: 150px;height: 30px;font-size: 15px;
}
#ZJDengLuBiaoGe 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;
}
</style>
JS部分：
<!--<script src="js/zhuJieMian.js"></script>-->
<script>
//封裝獲取屬性值的函數(shù)
// computed
//估算
//英 [k?m?pju:tid]美 [k?m?pju:tid]
//【v.
//估算;推斷;用計(jì)算機(jī)計(jì)算(結(jié)果、答案、總數(shù)等);(compute的過去式和過去分詞)
//adj.
//[醫(yī)]計(jì)算的;使用計(jì)算機(jī)的】
//attr為attribute的一部分的拼寫
//屬性
//英 [??tr?bju?t]美 [??tr??bjut]
//【v.
//把… 歸因于;把…歸咎于;認(rèn)為作品(或話語)屬于;認(rèn)為…具有某種特質(zhì)
//n.
//屬性;特性;品質(zhì);定語;性質(zhì);標(biāo)志;象征】
//element:元素
//getstyle(元素，屬性){}:得到CSS樣式風(fēng)格等的傳值元素和屬性的方法
//getComputedStyle:得到估算大致地CSS樣式風(fēng)格等
//
//current
//當(dāng)前的
//英 [?k?r(?)nt]美 [?k?r?nt]
//【adj.
//當(dāng)前的; 現(xiàn)時(shí)的; 流行的; 通用的; 通行的】
//currentStyle:當(dāng)前的風(fēng)格
function getstyle(element,attr){
if(window.getComputedStyle){
return window.getComputedStyle(element,null)[attr];
}else{
return element.currentStyle[attr];
}
}
// JSON: JavaScript Object Notation(JavaScript 對(duì)象表示法)
function annimate(element,json,fn){
clearInterval(element.timeID);
element.timeID=setInterval(function(){
var isgo=true;
for(var i in json){
if(i=="zIndex"){
element.style[i]=json[i];
}else if(i=="opacity"){
var cur=getstyle(element,i)*100;
var mubiao=json[i]*100;
var step=(mubiao-cur)/10;
step=step>0?Math.ceil(step):Math.floor(step);
cur+=step;
element.style[i]=cur/100;
}else{
var elementweizhi=parseInt(getstyle(element,i));
var bushu=(json[i]-elementweizhi)/10;
//console.log(bushu+"步數(shù)");
bushu=bushu>0?Math.ceil(bushu):Math.floor(bushu);
//console.log(bushu+"步數(shù)1");
//console.log(getstyle(element,attr));
elementweizhi+=bushu;
element.style[i]=elementweizhi+"px";
if(elementweizhi!=json[i]){
isgo=false;
}
}
}
if(isgo){
//console.log("ss");
clearInterval(element.timeID);
if(fn){
fn();
}
}
},20);
}
window.onload=function(){
//我的信息
var div_top_right=document.getElementById("ZJguDingCenter1-1-2");
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=["手機(jī)充電器","手機(jī)充電器","手機(jī)殼","手機(jī)貼膜"];
var input_texts_div=document.getElementById("ZJguDingCenter1-2-2");
var input_text=document.getElementById("ZJguDingCenter1-2-2").getElementsByTagName("input")[0];
var div_tishikuang=document.getElementById("ZJsousuokuang");
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="ZJcreateLi";
input_c_li.appendChild(input_c_li_text);
input_c_ul.appendChild(input_c_li);
}
input_texts_div.appendChild(input_c_ul);
}
}
}
//輪播
window.lunboshuzu=["img/lunbo1.jpg","img/lunbo2.jpg","img/lunbo3.jpg"];
window.index=0;
window.lunbodiv=document.getElementById("ZJguDingCenter2");
window.start=null;
window.lunbospans=lunbodiv.children[1].getElementsByTagName("span");
window.lunbo_img=lunbodiv.children[0];
window.erduo=lunbodiv.getElementsByClassName("ZJerduo");
for(var i of erduo){
if(i.className=="ZJerduo ZJyouerduo"){
i.onclick=function(){
lunbo();
}
}else{
i.onclick=function(){
lunbo("123");
}
}
}
for(var i of lunbospans){
i.onclick=function(){
var span_title=this.title;
for(var i of lunbospans){
i.style.backgroundColor="yellow";
}
this.style.backgroundColor="green";
lunbo_img.src=lunboshuzu[span_title];
}
}
lunbodiv.onmouseover=function(){
clearInterval(start);
start=null;
}
lunbodiv.onmouseout=function(){
start=setInterval(lunbo,2000);
}
//輪播圖
function lunbo(a){
if(a=="123"){
if(index>=0){
index--;
}
if(index<0){
index=2;
}
}else{
if(index<=2){
index++;
}
if(index>2){
index=0
}
}
for(var i of lunbospans){
i.style.backgroundColor="yellow";
}
lunbospans[index].style.backgroundColor="green";
lunbo_img.src=lunboshuzu[index];
//手風(fēng)琴區(qū)域
var imgs=document.getElementById("ZJguDingCenter3-1").getElementsByTagName("li");
for(var i of imgs){
i.onmouseover=function(){
for(var i of imgs){
annimate(i,{"height":100,"width":200});
}
annimate(this,{"height":250,"width":200})
}
}
//i.onmouseover();
}
lunbodiv.onmouseout();
//關(guān)閉彈出的登錄
window.inputs=document.getElementById("ZJDengLuBiaoGe").getElementsByTagName("input");
inputs[3].onclick=startDengLuJieMianFangFa;
// window.ZJDengLuBuFen.指的是HTML中的id="ZJDengLuBuFen"的部分,
//HTML中的id="ZJDengLuBuFen"的部分發(fā)生改變，那么
//window.ZJDengLuBuFen.的部分也要發(fā)生相應(yīng)的改變
window.ZJDengLuBuFen.onclick=closeDengLuJieMianFangFa;
var DengLuWenZi=document.getElementById("ZJDengLuWenZi");
DengLuWenZi.onclick=startDengLuJieMianFangFa;
//打開登錄和遮罩層
function startDengLuJieMianFangFa(){
var zhezhaoceng=document.getElementById("ZJzheChaoCeng");
zhezhaoceng.style.display="block";
var dl=document.getElementById("ZJDengLuBuFen");
dl.style.display="block";
}
//關(guān)閉登錄和遮罩層
function closeDengLuJieMianFangFa(){
var zhezhaoceng=document.getElementById("ZJzheChaoCeng");
zhezhaoceng.style.display="none";
var dl=document.getElementById("ZJDengLuBuFen");
dl.style.display="none";
}
var guDingLeftCloseImg=document.getElementById("ZJguDingLeftCloseImg");
var guDingLeft=document.getElementById("ZJguDingLeft");
guDingLeftCloseImg.onclick=function(){
guDingLeft.style.display="none";
}
}
// 寫xxx.onclick=function(){}格式的代碼時(shí),這個(gè)部分要放到 window.onload=function() {}里面
</script>
