品优购项目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 这里这里
小白前端养成记，如有哪里不足，请多多包含
版权声明：本文为weixin_42872310原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。