品优购项目html+css+js
跟着pink老师学前端,第一个完成的项目,总共有三个页面,分别是index.html、list.html和detail.html,下面是该项目的一些总结,最后有源码呦
ico图标,显示浏览器中的网页图标
- 获取网页ico图标,在地址后面加/favicon.ico,即可获得
- 要在html中加入到head中
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
- 制作ico图标,把想要的切成图片,借助网站http://bitbug.net/把图片转化为ico图标
- 注意啦,它是图标,不是照片,16、32、48常用,为了兼容性,把图标放在根目录下
字体图标
此次练习,有很多用到字体图标的地方
1.字体图标优点
(1)可以做和图片一样可以做的事情,改变透明度、旋转度…
(2)本质是文字,可以随意改变颜色、产生阴影、透明效果等
(3)体积小,携带的信息并没有削弱
(4)几乎支持所有浏览器、移动端必备的东西
2.下载网站
(1)http://icomoon.io
(2)http://www.iconfont.cn/
3.下载完的字体,要把fonts问价夹放入根目录中
4.在样式表里声明字体,要注意路径和字体名称
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?7kkyc2');
src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('../fonts/icomoon.woff?7kkyc2') format('woff'),
url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
5.使用例子,打开下载的字体图标文件夹,点开网页,复制相应的字体图标到huml中,然后再css样式表使用
<a href="#">更多</a>
a {
font-family: 'icomoon';
}
index部分
1.整体效果展示
2.轮播图写法
(1)html代码,focus里面装着两个a作为左右按钮,ul里面放置轮播图,ol为相应的小圆圈,注意a的href要设置为javascript:;不能为#,否则轮播图每轮播一次便会打开一个新的页面。
<div class="focus fl">
<a href="javascript:;" class="arrow_l"> < </a>
<a href="javascript:;" class="arrow_r"> > </a>
<ul>
<li>
<a href="#"><img src="upload/focus0.jpg"></a>
</li>
<li>
<a href="#"><img src="upload/focus1.jpg"></a>
</li>
<li>
<a href="#"><img src="upload/focus2.jpg"></a>
</li>
<li>
<a href="#"><img src="upload/focus3.jpg"></a>
</li>
<li>
<a href="#"><img src="upload/focus4.jpg"></a>
</li>
</ul>
<ol class="circle">
</ol>
</div>
(2)css部分,focus设置为相对定位,其余为绝对定位,focus就相当于一个展示框,而ul装着所有要展示的东西,当轮到谁上场时,谁就上台,也就是说focus的宽度决定了展示图片的大小,然后再设置overflow:hidden,就只能展示该展示的。
.focus {
position: relative;
height: 455px;
width: 720px;
overflow: hidden;
}
.arrow_l,
.arrow_r {
display: none;
position: absolute;
top: 50%;
margin-top: -20px;
height: 40px;
width: 24px;
line-height: 40px;
text-align: center;
/*半透明颜色*/
background-color: rgba(0, 0, 0, .3);
font-family: 'icomoon';
color: #fff;
font-size: 18px;
z-index: 2;
}
.arrow_r {
right: 0;
}
.focus ul {
position: absolute;
top: 0;
left: 0;
width: 700%;
}
.focus ul li {
float: left;
}
.focus ul li img {
width: 720px;
height: 455px;
}
.circle {
position: absolute;
bottom: 10px;
left: 50px;
}
.circle li {
float: left;
width: 8px;
height: 8px;
margin: 0 3px;
border: 2px solid rgb(255,255,255,0.5);
border-radius: 50%;
/*鼠标经过显示小手*/
cursor: pointer;
}
(3)js部分,index的js,见注释吧,嘻嘻
//轮播图
var focus = document.querySelector('.focus');
// 左右按钮
var arrow_l = document.querySelector('.arrow_l');
var arrow_r = document.querySelector('.arrow_r');
//给focus添加鼠标经过事件,当鼠标经过时,显示左右按钮,并且清除自动播放
focus.addEventListener('mouseenter', function() {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
//清除定时器,取消自动播放
clearInterval(timer);
//清空定时器变量
timer = null;
});
//给focus添加鼠标离开事件,当鼠标离开时,隐藏左右按钮,启动自动播放
focus.addEventListener('mouseleave', function() {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
//启动计时器
timer = setInterval(function() {
arrow_r.click();
}, 2000)
})
// 自动生成小圆圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
var focusWidth = focus.offsetWidth;
for(var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
//添加自定义属性
li.setAttribute('data-index', i);
ol.appendChild(li);
//小圆圈点击事件,利用排他思想,使点击的小圆圈添加背景颜色,并让图片移动到相应的位置
ol.children[i].addEventListener('click', function() {
for(var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('data-index');
//当我们点击小圆圈时,要把索引值给num和circle
num = circle = index;
animate(ul, -index * focusWidth);
})
}
ol.children[0].className = 'current';
//克隆第一张图片到ul后面,来实现无缝轮播
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
//点击右侧按钮,图片滚动一张
var num = 0;
//定义一个变量,用来控制小圆圈
var circle = 0;
//定义一个flag,节流阀,使点击图片一张结束才能点击下一张
var flag = true;
//右按钮点击事件
arrow_r.addEventListener('click', function() {
if(flag) {
flag = false;
if(num == ul.children.length - 1) {
num = 0;
ul.style.left = 0;
}
num++;
animate(ul, -num * focusWidth, function() {
flag = true;
});
circle++;
circle = circle == ol.children.length ? 0 : circle;
currentChange();
}
})
//左按钮点击事件
arrow_l.addEventListener('click', function() {
if(flag) {
flag = false;
if(num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + 'px';
}
num--;
animate(ul, -num * focusWidth, function() {
flag = true;
});
circle--;
circle = circle < 0 ? ol.children.length - 1 : circle;
currentChange();
}
})
//控制小圆圈跟随着图片的顺序
function currentChange() {
for(var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}
//自动播放事件
var timer = setInterval(function() {
arrow_r.click();
}, 2000)
(4)animate.js动画函数,轮播图能够动起来全靠它
function animate(obj, target, callback) {
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(target == obj.offsetLeft) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15)
}
list部分
1.整体效果展示
2. 页数输入框,当点击该文本框时,文本框的大小和颜色会有相应的变化,利用focus实现,当获取焦点时,进行改变
.page_skip input{
width: 46px;
height: 36px;
text-align: center;
border: 1px solid #ccc;
transition: all 0.3s;
}
.page_skip input:focus{
width: 88px;
border: 1px solid skyblue;
}
detail部分
- 整体效果展示
- 图片放大效果
(1)html代码,一个preview_img里面装着照片,黄色遮挡层mask,大的照片盒子并且装有一张照片
<div class="preview_wrap fl">
<div class="preview_img">
<img src="upload/s3.jpg">
<div class="mask"></div>
<div class="big">
<img src="upload/big.jpg" alt="" class="bigImg">
</div>
</div>
</div>
(2)css代码,preview_img 相对定位,其他绝对定位,要实现放大的效果,其实是big宽度和高度为500px,然后设置overflow:hidden,它的img的宽度和高度为800px,以此来实现放大的效果
.preview_wrap {
width: 400px;
height: 590px;
}
.preview_img {
position: relative;
height: 398px;
width: 398px;
border: 1px solid #ccc;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: #FEDE4F;
opacity: .5;
}
.big {
display: none;
position: absolute;
top: 0;
left: 410px;
width: 500px;
height: 500px;
z-index: 999;
border: 1px solid #ccc;
overflow: hidden;
}
.big img {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 800px;
}
(3)js代码,依旧看注释啦
var preview_img = document.querySelector('.preview_img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
//添加鼠标经过事件,显示黄色遮挡层、big盒子
preview_img.addEventListener('mouseover', function() {
mask.style.display = 'block';
big.style.display = 'block';
})
//添加鼠标离开事件,隐藏黄色遮挡层、big盒子
preview_img.addEventListener('mouseout', function() {
mask.style.display = 'none';
big.style.display = 'none';
})
//添加鼠标经过事件,鼠标移动的时候,让黄色的盒子跟着鼠标来走
preview_img.addEventListener('mousemove', function(e) {
// 先计算出鼠标在盒子内的坐标
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// mask 移动的距离
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
// 遮挡层的最大移动距离
var maskMax = preview_img.offsetWidth - mask.offsetWidth;
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskMax) {
maskY = maskMax;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
var bigImg = document.querySelector('.bigImg');
// 大图片最大移动距离
var bigMax = bigImg.offsetWidth - big.offsetWidth;
// 大图片的移动距离 X Y
var bigX = maskX * bigMax / maskMax;
var bigY = maskY * bigMax / maskMax;
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
})
- tab栏切换
用js实现,利用了排他思想,先把全部detail_lists的classname改为空,再把当前的classname改为current,把全部的detail_tab_con的display改为none,再把当前的display改为block
(1)html代码
<div class="detail fr">
<div class="detail_tab_list">
<ul>
<li class="current detail_lists">商品介绍</li>
<li class="detail_lists">规格与包装</li>
<li class="detail_lists">售后保障</li>
<li class="detail_lists">商品评价(50000)</li>
<li class="detail_lists">手机社区</li>
</ul>
</div>
<div class="detail_tab_con" style="display: block;">
<ul class="item">
<li> 品牌: Apple</li>
<li>商品名称:AppleiPhone6s</li>
<li>商品编号:64767920629</li>
<li>店铺: 全美优品二手商品专营店</li>
<li>频 率:以官网信息为准</li>
<li>商品毛重:20.0kg</li>
<li>机身内存:64GB</li>
<li>热门型号:iPhone 6s</li>
<li>商品标签:全网通</li>
<li>像素:1000-1600万</li>
<li>热点:指纹识别,Apple Pay,金属机身,拍照神器</li>
<li>系统:苹果(IOS)</li>
</ul>
<p class="more">查看更多参数</p>
</div>
<div class="detail_tab_con">
<ul class="item">
<li> 分辨率:1920*1080(FHD)</li>
<li>后置摄像头:1200万像素</li>
<li>前置摄像头:500万像素</li>
<li>核 数:其他</li>
<li>频 率:以官网信息为准</li>
<li>品牌: Apple ♥关注</li>
<li>商品名称:APPLEiPhone 6s Plus</li>
<li>商品编号:1861098</li>
<li>商品毛重:0.51kg</li>
<li>商品产地:中国大陆</li>
<li>热点:指纹识别,Apple Pay,金属机身,拍照神器</li>
<li>系统:苹果(IOS)</li>
<li>像素:1000-1600万</li>
<li>机身内存:64GB</li>
</ul>
<p class="more">查看更多参数</p>
<img src="upload/det01.jpg">
<img src="upload/det02.jpg">
<img src="upload/det03.jpg">
</div>
<div class="detail_tab_con">
<ul class="item">
<li> 售后保障</li>
<li>XXXXXXXX</li>
<li>XXXXX</li>
</ul>
<p class="more">查看更多参数</p>
</div>
<div class="detail_tab_con">
<ul class="item">
<li> 商品评价</li>
<li>XXXXXXXX</li>
<li>XXXXX</li>
</ul>
<p class="more">查看更多参数</p>
</div>
<div class="detail_tab_con">
<ul class="item">
<li> 手机社区</li>
<li>XXXXXXXX</li>
<li>XXXXX</li>
</ul>
<p class="more">查看更多参数</p>
</div>
</div>
(2)css部分
.detail {
width: 978px;
border: 1px solid #ccc;
margin-bottom: 50px;
}
.detail_tab_list {
height: 39px;
background-color: #f1f1f1;
}
.detail_tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
cursor: pointer;
}
.detail_tab_list li.current {
background-color: #c81623;
color: #fff;
}
.detail_tab_con {
display: none;
}
.item {
padding: 20px 0 0 20px;
}
.item li {
height: 22px;
}
.more {
float: right;
font-family: 'icomoon';
font-weight: 700;
}
(3)js部分,index的js
var detail_lists = document.querySelectorAll('.detail_lists');
var detail_cons = document.querySelectorAll('.detail_tab_con');
for(var i = 0; i < detail_lists.length; i++) {
//给detail_tab_con添加自定义属性
detail_lists[i].setAttribute('data-index-detail', i);
detail_lists[i].addEventListener('mouseenter', function() {
//排他思想,当鼠标经过某个li,全部li背景颜色变为空,div全部隐藏
for(var i = 0; i < detail_lists.length; i++) {
detail_lists[i].className = '';
detail_cons[i].style.display = 'none';
}
//改变当前li的背景颜色,并显示对应的div
this.className = 'current';
var index = this.getAttribute('data-index-detail');
detail_cons[index].style.display = 'block';
})
}
源码:https://github.com/ajagkajfl/pingyougou.git 这里这里
小白前端养成记,如有哪里不足,请多多包含