商品展示
- 进度条长度的设置 : 取决于商品的长度
// 进度条移动 1px 商品移动多少像素
// 内容走的距离 / 滚动条走的距离 =（内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度)
//内容走的距离 = （内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度) * 滚动条走的距离
oul.style.left = - (oul.offsetWidth - slider.offsetWidth) / (slider.offsetWidth - progress_flag.offsetWidth) * x + 'px';
scroll家族
window.onscroll只要当滚动条滚动就会调用
box.scrollTop 内容被卷曲的上面距离
box.scrollLeft
scroll家族可以获取值, 也可以设置值.
!!! 而offset家族只能获取值, 不能设置值. 应该用style.xx设置值
获取滚动距离(不同浏览器适配问题---浏览器模式)
- 浏览器适配问题
document.documentElement.scrollTop;
//或者最新的浏览器获取滚动距离
window.pageYoffset
- 获取滚动距离的兼容写法 (可以将方法抽取到一个css文件中)
function scroll() {
if(window.pageYOffset || window.pageXOffset){
// 是IE9+ 和最新的浏览器
return {
top:window.pageYOffset,
left:window.pageXOffset
};
}else if(document.compatMode == "CSS1Compat"){
// CSS1Compat是w3c标准模式 IE7+
return {
top:document.documentElement.scrollTop,
left:document.documentElement.scrollLeft
}
}else {
// 怪异模式 backCompat. IE6及以下
return {
top:document.body.scrollTop,
left:document.body.scrollLeft
}
}
}
瀑布流 !!! 重点
特点: 等宽不等高
优点: 直观 简洁 节省空间
以类型的网站不会在一级页面使用. 因为会影响SEO优化 (可以放在二级页面)
description 和 keywords. 这两个关键词的内容可以提高SEO效率.
eg. 京东主页head.png
步骤 :
- 父盒子居中 让main在body中居中
margin: 0 auto;//使用前提条件: 1. 块级元素 2. 宽高被设定, 并不超过父元素.
求瀑布流的动态宽度 = parseInt(屏幕宽度 / 盒子宽度) * 盒子宽度;
2. 子盒子定位
除了第一行, 其他都要定位. 将下一个盒子拼接到最矮的盒子下面
子盒子定位
创建一个高度数组
var arrH = [];
for(var i = 0; i<allBox.length; i++){
// 1.取出盒子
var box = allBox[i];
// 获取每一个盒子的高度
var boxH = box.offsetHeight;
if(i < cols){
// 第一行
// 第一行盒子i不需要定位 并且把第一行盒子的高度添加到高度数组中
arrH.push(boxH);
}else {
// 不是第一行
// 盒子需要定位
// 每次拼接到最矮盒子的下面
// 1.从高度数组中找出最小值
var minH = _.min(arrH);
// 2.获取最小值的索引
// indexOf 获取数组中当前值的索引
var minIndex = arrH.indexOf(minH);
//检索字符串 str.indexOf('a'); str.lastIndexOf('a');
// 3.设置当前盒子的x值
box.style.left = minIndex * boxW + 'px';
box.style.top = minH + 'px';
//浏览器中看到top left有值, 但是并不生效 => 是因为没有定位.
box.style.position = 'absolute';
// 4.更新高度数组
arrH[minIndex] = minH + boxH;
}
}
underscore框架并不会污染变量, 因为使用了闭包.
中部吸顶效果 !!! 常用
使用到h5新增标签 : section 区块; nav 导航;
在>= 给nav添加类名fixed,
.fix{
position: fixed;
left: 0;
top: 0; }
