商品展示
- 進(jìn)度條長度的設(shè)置 : 取決于商品的長度
// 進(jìn)度條移動(dòng) 1px 商品移動(dòng)多少像素
// 內(nèi)容走的距離 / 滾動(dòng)條走的距離 =（內(nèi)容的長度 - 盒子的長度） / (盒子長度 - 滾動(dòng)條的長度)
//內(nèi)容走的距離 = （內(nèi)容的長度 - 盒子的長度） / (盒子長度 - 滾動(dòng)條的長度) * 滾動(dòng)條走的距離
oul.style.left = - (oul.offsetWidth - slider.offsetWidth) / (slider.offsetWidth - progress_flag.offsetWidth) * x + 'px';
scroll家族
window.onscroll只要當(dāng)滾動(dòng)條滾動(dòng)就會(huì)調(diào)用
box.scrollTop 內(nèi)容被卷曲的上面距離
box.scrollLeft
scroll家族可以獲取值, 也可以設(shè)置值.
!!! 而offset家族只能獲取值, 不能設(shè)置值. 應(yīng)該用style.xx設(shè)置值
獲取滾動(dòng)距離(不同瀏覽器適配問題---瀏覽器模式)
- 瀏覽器適配問題
document.documentElement.scrollTop;
//或者最新的瀏覽器獲取滾動(dòng)距離
window.pageYoffset
- 獲取滾動(dòng)距離的兼容寫法 (可以將方法抽取到一個(gè)css文件中)
function scroll() {
if(window.pageYOffset || window.pageXOffset){
// 是IE9+ 和最新的瀏覽器
return {
top:window.pageYOffset,
left:window.pageXOffset
};
}else if(document.compatMode == "CSS1Compat"){
// CSS1Compat是w3c標(biāo)準(zhǔn)模式 IE7+
return {
top:document.documentElement.scrollTop,
left:document.documentElement.scrollLeft
}
}else {
// 怪異模式 backCompat. IE6及以下
return {
top:document.body.scrollTop,
left:document.body.scrollLeft
}
}
}
瀑布流 !!! 重點(diǎn)
特點(diǎn): 等寬不等高
優(yōu)點(diǎn): 直觀 簡潔 節(jié)省空間
以類型的網(wǎng)站不會(huì)在一級(jí)頁面使用. 因?yàn)闀?huì)影響SEO優(yōu)化 (可以放在二級(jí)頁面)
description 和 keywords. 這兩個(gè)關(guān)鍵詞的內(nèi)容可以提高SEO效率.
eg. 京東主頁head.png
步驟 :
- 父盒子居中 讓main在body中居中
margin: 0 auto;//使用前提條件: 1. 塊級(jí)元素 2. 寬高被設(shè)定, 并不超過父元素.
求瀑布流的動(dòng)態(tài)寬度 = parseInt(屏幕寬度 / 盒子寬度) * 盒子寬度;
2. 子盒子定位
除了第一行, 其他都要定位. 將下一個(gè)盒子拼接到最矮的盒子下面
子盒子定位
創(chuàng)建一個(gè)高度數(shù)組
var arrH = [];
for(var i = 0; i<allBox.length; i++){
// 1.取出盒子
var box = allBox[i];
// 獲取每一個(gè)盒子的高度
var boxH = box.offsetHeight;
if(i < cols){
// 第一行
// 第一行盒子i不需要定位 并且把第一行盒子的高度添加到高度數(shù)組中
arrH.push(boxH);
}else {
// 不是第一行
// 盒子需要定位
// 每次拼接到最矮盒子的下面
// 1.從高度數(shù)組中找出最小值
var minH = _.min(arrH);
// 2.獲取最小值的索引
// indexOf 獲取數(shù)組中當(dāng)前值的索引
var minIndex = arrH.indexOf(minH);
//檢索字符串 str.indexOf('a'); str.lastIndexOf('a');
// 3.設(shè)置當(dāng)前盒子的x值
box.style.left = minIndex * boxW + 'px';
box.style.top = minH + 'px';
//瀏覽器中看到top left有值, 但是并不生效 => 是因?yàn)闆]有定位.
box.style.position = 'absolute';
// 4.更新高度數(shù)組
arrH[minIndex] = minH + boxH;
}
}
underscore框架并不會(huì)污染變量, 因?yàn)槭褂昧碎]包.
中部吸頂效果 !!! 常用
使用到h5新增標(biāo)簽 : section 區(qū)塊; nav 導(dǎo)航;
在>= 給nav添加類名fixed,
.fix{
position: fixed;
left: 0;
top: 0; }
