JS美淘网电商项目部分效果实现：购物车，手风琴，登录注册，放大镜
主机界面：
CSS部分：
<style>
*{
margin: 0px;padding: 0px;font-size: 10px;
}
ul{
list-style: none;
}
/* list:表*/
/* list-style: none;去除li的小圆点*/
#ZJguDingCenter{
width: 1000px; height: 800px;margin: 0px auto;position: relative;
}
/*position 英[pəˈzɪʃn]美[pəˈzɪʃn]n. 位置*/
/*#guDingCenter1是设置头部固定的所有区域,fixed为国定的意思*/
/*relative 英[ˈrelətɪv]
美[ˈrelətɪv]
adj. 相比较而言的; 比较的; 相对的*/
#ZJguDingCenter1{
position: fixed;
/*fixed 英[fɪkst]
美[fɪkst]
adj. 固定的*/
z-index: 20;background-color: white;width: 1000px;height: 145px;
/*z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
每个元素默认z-index为0。哪个元素的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
绝对
英 [ˈ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;用来设置图片和输入文字不重在一起,用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.
形状;轮廓;存在形式;表现形式;种类;类型;常规;规矩;表格;年级;竞技状态;长板凳;窝*/
#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/限时秒杀.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>
//封装获取属性值的函数
// computed
//估算
//英 [kəmˈpju:tid]美 [kəmˈpju:tid]
//【v.
//估算;推断;用计算机计算(结果、答案、总数等);(compute的过去式和过去分词)
//adj.
//[医]计算的;使用计算机的】
//attr为attribute的一部分的拼写
//属性
//英 [əˈtrɪbjuːt]美 [ˈætrəˌbjut]
//【v.
//把… 归因于;把…归咎于;认为作品(或话语)属于;认为…具有某种特质
//n.
//属性;特性;品质;定语;性质;标志;象征】
//element:元素
//getstyle(元素，属性){}:得到CSS样式风格等的传值元素和属性的方法
//getComputedStyle:得到估算大致地CSS样式风格等
//
//current
//当前的
//英 [ˈkʌr(ə)nt]美 [ˈkɜrənt]
//【adj.
//当前的; 现时的; 流行的; 通用的; 通行的】
//currentStyle:当前的风格
function getstyle(element,attr){
if(window.getComputedStyle){
return window.getComputedStyle(element,null)[attr];
}else{
return element.currentStyle[attr];
}
}
// JSON: JavaScript Object Notation(JavaScript 对象表示法)
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+"步数");
bushu=bushu>0?Math.ceil(bushu):Math.floor(bushu);
//console.log(bushu+"步数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=["手机充电器","手机充电器","手机壳","手机贴膜"];
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];
//手风琴区域
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();
//关闭弹出的登录
window.inputs=document.getElementById("ZJDengLuBiaoGe").getElementsByTagName("input");
inputs[3].onclick=startDengLuJieMianFangFa;
// window.ZJDengLuBuFen.指的是HTML中的id="ZJDengLuBuFen"的部分,
//HTML中的id="ZJDengLuBuFen"的部分发生改变，那么
//window.ZJDengLuBuFen.的部分也要发生相应的改变
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";
}
//关闭登录和遮罩层
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(){}格式的代码时,这个部分要放到 window.onload=function() {}里面
</script>