web前端大作业-爱代码爱编程
主要实现:
1、放大镜效果。
2、点击小图出现中图的效果。
3、实现小图左右切换的效果。
4、实现图片上下切换的效果。
5、实现购物车数量增加减少的效果。
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--引入css样式-->
<link rel="stylesheet" href="./css/detail.css">
<!--引入字体图标大于小于号图标-->
<link rel="stylesheet" href="./css2/iconfont.css">
</head>
<body>
<div class="wrap">
<div class="product-intro">
<div class="preview-wrap">
<div class="main-img">
<a class="img" href="javascript:;"><img src="./images/a1.jpg"></a>
<div class="zoom-pup"></div>
<div class="zoom-div">
<img src="images/a1.jpg">
</div>
</div>
<div class="spec-list">
<a class="prev" href="javascript:;"></a>
<a class="next" href="javascript:;"></a>
<div class="spec-items">
<ul>
<li class="img-hover">
<img src="./images/a1.jpg">
</li>
<li>
<img src="./images/a2.avif">
</li>
<li>
<img src="./images/a3.avif">
</li>
<li>
<img src="./images/a4.avif">
</li>
<li>
<img src="./images/a5.avif">
</li>
<li>
<img src="./images/a6.avif">
</li>
</ul>
</div>
</div>
</div>
<div class="intemInfo-wrap">
<div class="blank">
<div class="sku-name">
<img src="images/h.png">
高闪海贼王手办路飞18cm模型索隆艾斯罗山治公仔全套动漫生日礼物摆件火拳路飞/高约
</div>
<div class="news">
<h6>五月大促,每满99减10,福利享不停,冲刺爆量,提前购<a href="javascript:;">查看></a></h6>
</div>
<div class="summary">
<div class="summary-price">
<p>京东价 <span>¥ 109.00</span> <a href='javascript:;'>降价通知</a></p>
</div>
<div class="summary-promotion">
<div class="dt">促销</div>
<div class="dt-1">
<div class="prom-one">
<p><span class="span1">跨店铺满减</span> 每满99,可减10元现金</p>
</div>
<div class="prom-two">
<p><span class="span1">满减</span> 满20元减5元,满50元减5元,满100元减15元 <a href='javascript:;'>详情>></a></p>
</div>
<div class="prom-three">
<p>"满减""跨店铺满减"仅可任选其一,可在购物车更改</p>
</div>
</div>
</div>
</div>
<div class="summary-one">
<div class="dl">配送至</div>
<div class="dl-1">
<div class="sum-one">
<select>
<option>甘肃</option>
<option>四川</option>
<option>江苏</option>
<option>陕西</option>
<option>江西</option>
<option>山东</option>
</select>
<select>
<option>兰州市</option>
<option>广安市</option>
<option>自贡市</option>
<option>常州市</option>
<option>苏州市</option>
<option>宝鸡市</option>
<option>榆林市</option>
<option>萍乡市</option>
<option>新余市</option>
<option>日照市</option>
<option>滨州市</option>
</select>
</div>
<div class="sum-two">
<p>支持 <a href="javascript:;">可配送全球 | 特权保障 | 退换货运费险 | 急速审核</a> 在线支付免运费</p>
</div>
<div class="sum-three">
<p>由 <span class="span3">高闪玩具旗舰店</span> 发货,并提供售后服务,现在下单,5月10日发货,预计5月13日送达</p>
</div>
</div>
<hr color="#ccc">
</div>
<div class="goods">
<div class="dh">选择型号</div>
<div class="grid-container">
<div class="grid-items">
<a href="javascript:;">
<img src="images/a1.jpg">
<span class="span4">火拳路飞/高约15cm</span>
</a>
</div>
<div class="grid-items">
<a href="javascript:;">
<img src="images/a2.avif">
<span class="span4">火拳艾斯/高约13cm</span>
</a>
</div>
<div class="grid-items">
<a href="javascript:;">
<img src="images/a3.avif">
<span class="span4">黑足山治/高约17cm</span>
</a>
</div>
<div class="grid-items">
<a href="javascript:;">
<img src="images/a4.avif">
<span class="span4">爱笑/高约28cm</span>
</a>
</div>
<div class="grid-items">
<a href="a5.avif">
<img src="images/a5.avif">
<span class="span4">站姿艾斯/高约27cm</span>
</a>
</div>
<div class="grid-items">
<a href="javascript:;">
<img src="images/a6.avif">
<span class="span4">三千世界索隆/高约19cm</span>
</a>
</div>
</div>
</div>
</div>
<div class="chose-amount">
<input type="text" class="buy-num" value="1" placeholder="1">
<a href="javascript:;" class="reduce disabled">-</a>
<a href="javascript:;" class="add">+</a>
</div>
</div>
</div>
<div class="track">
<div class="track-items">
<ul>
<li class="img-flow">
<img src="images/h1.avif">
</li>
<li>
<img src="images/h2.avif">
</li>
<li>
<img src="images/h3.avif">
</li>
<li>
<img src="images/h4.avif">
</li>
<li>
<img src="images/h5.avif">
</li>
<li>
<img src="images/h6.avif">
</li>
</ul>
</div>
<div class="button">
<a class="shang" href="javascript:;"><span class="iconfont"></span></a>
<a class="xia" href="javascript:;"><span class="iconfont"></span></a>
</div>
</div>
</div>
<script src="./js/detail.js"></script>
</body>
</html>
css文件
.wrap{
width:1210px;
margin:0 auto;
}
.product-intro{
width:1210px;
margin-top:10px;
margin-bottom:10px;
}
.preview-wrap{
width:352px;
height:500px;
/* background-color: aqua; */
padding-bottom:15px;
float:left;
}
.intemInfo-wrap{
width:590px;
height:800px;
/* background-color: cadetblue; */
margin-left:30px;
margin-right:24px;
float:left;
}
.track{
width:210px;
height:600px;
/* background-color:cornflowerblue; */
float:left;
}
.main-img{
width:350px;
height:350px;
border:1px solid black;
margin-bottom:20px;
position:relative;
}
.spec-list{
width:352px;
height:54px;
margin-bottom:18px;
/* background-color: bisque; */
position: relative;
}
.prev,.next{
position:absolute;
top:50%;
width:22px;
height:32px;
margin-top:-16px;
cursor: pointer;
text-decoration: none;
background:url('../images/__sprite.png')
no-repeat;
}
.prev{
left:0;
background-position: 0 -54px;
}
.next{
right:0;
background-position:-78px 0 ;
}
.spec-items{
position: relative;
width:290px;
height:54px;
margin:0 auto;
overflow:hidden;
}
.spec-items ul{
width:406px;
height:54px;
position:absolute;
top:-18px;
left:-38px;
transition:all 0.5s ;
}
.spec-items ul li{
width:54px;
height:54px;
margin:0 2px;
float:left;
list-style-type: none;
}
.spec-items ul li img{
width:50px;
height:50px;
margin:2px;
border:2px solid #fff;
}
/* .spec-items ul li img:hover{
border:2px solid red;
} */
.spec-items ul .img-hover img{
border:2px solid #e53e41;
}
.zoom-pup{
width:236px;
height:236px;
background-color:gold ;
opacity: 0.5;
position:absolute;
top:0;
left:0;
display:none;
}
.zoom-div{
width:540px;
height:540px;
position:absolute;
top:0;
left:351px;
overflow: hidden;
background-color: darkkhaki;
display:none;
}
.zoom-div img{
position:absolute;
top:0;
left:0;
height:800px;
width:800px;
z-index:10;
}
.blank{
width:100%;
height:500px;
}
.sku-name{
width:570px;
height:30px;
padding:10px;
}
.news{
width:570px;
height:18px;
margin:10px;
}
h6{
color:brown;
}
.summary{
width:570px;
height:107px;
padding-bottom: 5px;
background-color:#f1f1f1;
}
.summary-price{
width:570px;
height:22px;
margin:10px;
padding-bottom:5px;
}
p{
color:#999;
font-size:13px;
}
p span{
color: #e53e41;
font-size:25px;
}
p a{
color:rgb(8, 114, 146);
text-decoration: none;
}
p a:hover{
color:#e53e41;
}
.summary-promotion{
width:570px;
height:91px;
padding-bottom:5px;
}
.dt{
width:48px;
height:30px;
padding-left:10px;
line-height:10px;
color:#999;
font-size:13px;
}
.dt-1{
width:520px;
height:91px;
margin-left:70px;
margin-top:-40px;
}
.prom-one{
width:430px;
height:15px;
line-height:15px;
font-size:12px;
}
.prom-two{
width:430px;
height:15px;
line-height:15px;
font-size:12px;
}
.prom-three{
width:430px;
height:15px;
line-height:15px;
font-size:12px;
}
.prom-three p{
color:#666;
}
.span1{
border:2px solid #e53e41;
font-size:12px;
}
.summary-one{
width:570px;
height:100px;
/* background-color:aqua; */
}
.chose-amount{
width:58px;
height:44px;
border:1px solid #ccc;
margin-right:10px;
/* background-color: burlywood; */
position:relative;
}
.dl{
width:50px;
height:30px;
line-height:30px;
color:#999;
font-size:12px;
margin:10px;
}
.dl-1{
width:520px;
height:91px;
margin-left:70px;
margin-top:-34px;
/* background-color:aquamarine; */
}
.sum-one{
width:430px;
height:15px;
line-height:15px;
font-size:12px;
color:#999;
}
.span3{
font-size:12px;
}
.goods{
width:570px;
height:160px;
/* background-color:aqua; */
}
.dh{
width:50px;
height:30px;
line-height:30px;
color:#999;
font-size:12px;
margin:10px;
}
.grid-container{
width:520px;
height:150px;
margin-left:70px;
margin-top:-34px;
/* background-color:burlywood; */
display:grid;
Grid-template-rows:1.5fr 1.5fr ;
Grid-template-columns:1fr 1fr 1fr;
}
.grid-items{
width:134px;
height:43px;
background-color:#f7f7f7;
float:left;
color:#fff;
margin-top:5px;
margin-right:7px;
margin-bottom:4px;
position:relative;
border:2px solid #666;
}
.grid-items a{
text-decoration: none;
font-size:13px;
color:#999;
}
.grid-items:hover{
border:2px solid #e53e41;
}
.span4{
position:absolute;
top:12px;
left:43px;
}
.grid-items img{
width:40px;
height:43px;
}
.buy-num{
width:43px;
height:42px;
padding:1px 2px;
line-height:42px;
position:absolute;
top:1px;
left:0;
border:0;
text-align:center;
}
.reduce,.add{
width:15px;
height:22px;
border:1px solid #ccc;
color:#666;
line-height:22px;
text-align:center;
background-color:#f1f1f1;
position:absolute;
text-decoration: none;
}
.reduce{
right:-1px;
bottom:-1px;
}
.add{
top:-1px;
right:-1px;
}
.disabled{
color:#ccc;
cursor:not-allowed;/*不允许点击*/
}
.track-items{
width:210px;
height:500px;
position:relative;
margin:0 auto;
overflow:hidden;
}
.track-items ul{
width:210px;
height:700px;
position:absolute;
top:0;
left:0;
transition:all 0.5s ;
}
.track-items ul li{
width:150px;
height:150px;
margin:0 2px;
list-style-type: none;
}
.track-items ul li img{
width:140px;
height:140px;
margin:2px;
border:2px solid #fff;
}
.track-items ul .img-flow img{
border:2px solid #e53e41;
}
.button{
width:210px;
height:100px;
position:relative;
}
.button a{
color:#666;
}
.shang,.xia{
position:absolute;
top:50px;
width:22px;
height:32px;
/* margin-top:-16px; */
cursor: pointer;
text-decoration: none;
}
.shang{
left:70px;
}
.xia{
right:70px;
}
js文件
//实现前进和后退小图片的效果=====
let prev=document.querySelector('.prev');
let next=document.querySelector('.next');
let ul=document.querySelector('.spec-items ul');
prev.onclick=function(){
ul.style.left='-38px';
prev.style.background='url(images/disabled-prev.png)';//以html文件为准
}
next.onclick=function(){
ul.style.left='-154px';
next.style.background='url(images/disabled-next.png)';
}
/**
* 可以有过渡效果:
* 1、数值类的
* 2、颜色类的
* 3、转换:平移、旋转、缩放、倾斜
* 盒子阴影
*/
//实现鼠标放在小图上,边框变红并且上面显示小图
let lis=document.querySelectorAll('.spec-items ul li');
let img=document.querySelector('.main-img img');
let imgs=document.querySelectorAll('.spec-items img');
for(let i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
for(let j=0;j<lis.length;j++){
lis[j].className='null';
}
lis[i].className='img-hover';
//两种表达:
// 1、img.src=lis[i].children[0].src;
//2、img.src=imgs[i].src;
img.src=imgs[i].src;
}
}
//实现鼠标滑入显示放大镜和大图的效果
let mainImg=document.querySelector('.main-img');//获取中图
let zoomPup=document.querySelector('.zoom-pup');//获取放大镜,中图上面的小黄块
let zoomDiv=document.querySelector('.zoom-div');//获取大图的div
let bigImg=document.querySelector('.zoom-div img')//获取大图
mainImg.onmouseover=function(){
zoomPup.style.display='block';
zoomDiv.style.display='block';
}
//实现鼠标滑出隐藏放大镜和大图的效果
mainImg.onmouseout=function(){
zoomPup.style.display='none';
zoomDiv.style.display='none';
}
//给中图绑定鼠标移动事件
mainImg.onmousemove=function(e){
//获取鼠标距离文档顶部(body)的距离pageX
let pageY=e.pageY;
//获取中图距离文档顶部(body)的距离 offsetTop
let offsetTop=mainImg.offsetTop;
//获取黄色小块的高度的一半
let h=zoomPup.clientHeight / 2;
//获取黄色小块顶部距离中图顶部的距离
let top=pageY-offsetTop-h;
//判断top
if(top<=0){
top=0;
}else if(top>=mainImg.clientHeight-zoomPup.clientHeight){
top=mainImg.clientHeight-zoomPup.clientHeight;
}
//将放大镜的定位top设置为黄色小块顶部距离中图顶部的距离。
zoomPup.style.top=top+'px';
//获取鼠标距离文档左边(body)的距离 pageX
let pageX=e.pageX;
//获取中图距离文档左边(body)的距离
let offsetLeft=mainImg.offsetLeft;
//获取黄色小块宽度的一半
let w=zoomPup.clientWidth / 2;
//获取黄色小块距离中图左边的距离
let left=pageX-offsetLeft-w;
//判断left
if(left<=0){
left=0;
}else if(left>=mainImg.clientWidth-zoomPup.clientWidth){
left=mainImg.clientWidth-zoomPup.clientWidth;
}
//将放大镜的定位left设置为黄色小块顶部距离中图顶部的距离。
zoomPup.style.left=left+'px';
let y=top/(mainImg.clientHeight-zoomPup.clientHeight);
let yy=y*(800-540);
bigImg.style.top=-yy+'px';//让大图向上走yy的距离
let x=left/(mainImg.clientWidth-zoomPup.clientWidth);
let xx=x*(800-540);
bigImg.style.left=-xx+'px';//让大图向左走xx的距离
}
//实现购物车数量的改变
let reduce=document.querySelector('.reduce');
let add=document.querySelector('.add');
let buyNum=document.querySelector('.buy-num');
add.onclick=function(){
buyNum.value++;
if(buyNum.value>1){
reduce.className='reduce';
}
}
reduce.onclick=function(){
if(buyNum.value>1){
buyNum.value--;
}else if(buyNum.value<=1){
buyNum.value=1;
reduce.className='reduce disabled';
}
}
//实现右边的图上下移动的效果
let shang=document.querySelector('.shang');
let xia=document.querySelector('.xia');
let ul1=document.querySelector('.track-items ul');
shang.onclick=function(){
ul1.style.top='-369px';
}
xia.onclick=function(){
ul1.style.top='0px';
}
let lis1=document.querySelectorAll('.track-items ul li');
for(let i=0;i<lis.length;i++){
lis1[i].onmouseover=function(){
for(let j=0;j<lis1.length;j++){
lis1[j].className='null';
}
lis1[i].className='img-flow';
}
}
截图如下:
详情页:
点击小图出现中图的效果图:
放大镜效果:
实现小图左右切换的效果:
实现购物车数量增加减少的效果:
实现图片上下切换的效果: