商品展示特效

作者: 码农的世界你不懂 | 来源:发表于2016-12-31 14:20 被阅读0次

一、水平滚动条和垂直滚动条

1.1 核心技术点
1）求滚动条的长度？ 2）拖动滚动条，求内容要走多少？
滚动条的长度取决于滚动内容（滚动内容越长，滚动条越短）；
内容滚动的距离和滚动条走的距离是成倍数关系。
1.2 换算公式
获取滚动条的长度：
滚动条的长度 / 盒子的长度 = 盒子的长度 / 内容的长度**
滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度**
拖动滚动条，求内容走的长度：
内容走的距离 / 滚动条走的距离 =（内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度)**
内容走的距离 = （内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度) * 滚动条走的距离

HTML结构
<div id="box">
         <ul id="box_content">
             <li><img src="images/img1.jpg" alt=""></li>
             <li><img src="images/img2.jpg" alt=""></li>
             <li><img src="images/img3.jpg" alt=""></li>
             <li><img src="images/img4.jpg" alt=""></li>
             <li><img src="images/img5.jpg" alt=""></li>
             <li><img src="images/img6.jpg" alt=""></li>
             <li><img src="images/img7.jpg" alt=""></li>
             <li><img src="images/img8.jpg" alt=""></li>
             <li><img src="images/img1.jpg" alt=""></li>
             <li><img src="images/img2.jpg" alt=""></li>
             <li><img src="images/img1.jpg" alt=""></li>
             <li><img src="images/img2.jpg" alt=""></li>
             <li><img src="images/img3.jpg" alt=""></li>
             <li><img src="images/img4.jpg" alt=""></li>
             <li><img src="images/img5.jpg" alt=""></li>
             <li><img src="images/img6.jpg" alt=""></li>
             <li><img src="images/img7.jpg" alt=""></li>
             <li><img src="images/img8.jpg" alt=""></li>
             <li><img src="images/img1.jpg" alt=""></li>
             <li><img src="images/img2.jpg" alt=""></li>
         </ul>
         <div id="box_bottom">
             <span id="progress"></span>
         </div>
     </div>

CSS样式
<style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            list-style-type: none;
        }

        #box{
            width: 900px;
            height: 180px;
            border: 1px solid #ccc;
            margin: 100px auto;

            position: relative;
            overflow: hidden;
        }

        #box_content{
           width: 2600px;
           height: 130px;
           position: absolute;
           top:10px;
           left:0;
        }

        #box_content li{
            float: left;
        }

        #box_bottom{
            width: 100%;
            height: 25px;
            background-color: #cccccc;

            position: absolute;
            left: 0;
            bottom: 0;
        }

        #progress{
            width: 100%;
            height: 100%;
            background-color: orangered;
            border-radius: 15px;

            position: absolute;
            cursor: pointer;
        }
    </style>

JS特效
<script>
    window.onload = function(){
        // 1. 获取需要的标签
        var box = document.getElementById('box');
        var box_content = document.getElementById('box_content');
        var box_bottom = document.getElementById('box_bottom');
        var progress = document.getElementById('progress');

        // 2. 设置滚动条的长度
        // 滚动条长度 = ( 盒子的宽度 / 滚动内容的宽度) * 盒子的宽度
        var pLength = (box.offsetWidth / box_content.offsetWidth) * box.offsetWidth;
        progress.style.width = pLength + 'px';

        // 3.监听按下事件
        progress.onmousedown = function(event){
            var event = event || window.event;

            // 3.1 获取起始位置
            var startX = event.clientX - progress.offsetLeft;

            // 3.2 移动事件
            document.onmousemove = function(event){
                var event = event || window.event;
                var endX =  event.clientX - startX;

                // 碰撞检测
                if(endX < 0){
                    endX = 0;
                }else if(endX >= box.offsetWidth - progress.offsetWidth){
                    endX = box.offsetWidth - progress.offsetWidth;
                }

                // 3.3 赋值
                progress.style.left = endX + 'px';

                // 3.4 内容走起来
                // 内容走的距离 = （内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度) * 滚动条走的距离
                var c_length = (box_content.offsetWidth - box.offsetWidth) /(box.offsetWidth - progress.offsetWidth) * endX;
                box_content.style.left = -c_length + 'px';

                return false;
            };

            // 3.5 松开鼠标
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            };

            return false;
        }
    }
</script>

展示图

二、内置对象document

Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问:

document.head（获取头部）
document.body（获取身体）
document.title （获取标题）
document.documentElement（获取整个html)

Document.compatMode:
BackCompat：标准兼容模式关闭
浏览器宽度:document.body.clientWidth

CSS1Compat：标准兼容模式开启

浏览器宽度:document.documentElement.clientWidth
BackCompat 对应 quirks mode(怪异模式) , CSS1Compat 对应 strict mode (严格模式) ：

早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式)，但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式) 。

三、scroll家族

3.1 基本概念

网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
在实际开发中使用比较多的就是scrollTop，如下图：

3.2 处理scroll家族浏览器适配问题

ie9+ 和最新浏览器

window.pageXOffset; （scrollLeft）
window.pageYOffset; （scrollTop）


- **Firefox浏览器 和 其他浏览器**
`document.documentElement.scrollTop;`

- **Chrome浏览器 和 没有声明 DTD <DOCTYPE >**
`document.body.scrollTop;`

- **兼容写法**
>var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

###3.3 scrollTo(x,y)
- 把内容滚动到指定的坐标

- `格式：scrollTo(xpos,ypos)`
 - - xpos 必需；要在窗口文档显示区左上角显示的文档的 x 坐标；

 - - ypos 必需；要在窗口文档显示区左上角显示的文档的 y 坐标 。

- 网页大部分都没有水平滚动条，所以，这个x 不太常用。

##四、什么是Json?
>[JSON](http://baike.baidu.com/view/136475.htm)([JavaScript](http://baike.baidu.com/view/16168.htm) Object Notation) 是一种轻量级的数据交换格式。它基于[ECMAScript](http://baike.baidu.com/view/810176.htm)的一个子集。相比于XML，json易于人阅读和编写，同时也易于机器解析和生成，目前数据传递基本上都使用json。

-  JSON有两种结构：对象 和 数组，两种结构相互组合从而形成各种复杂的数据结构。

- -数据在键值对中

-  数据由逗号分隔

- 花括号保存对象

- 方括号保存数组

{ id: '100000', text: '廊坊银行总行', children: [

{
id: '110000',
text: '廊坊分行',
children: [
{
id: '113000',
text: '廊坊银行开发区支行',
leaf: true
},
{
id: '112000',
text: '廊坊银行解放道支行',
children: [
{
id: '112200',
text: '廊坊银行三大街支行',
leaf: true
},
{
id: '112100',
text: '廊坊银行广阳道支行',
leaf: true
}
]
},
{
id: '111000',
text: '廊坊银行金光道支行',
leaf: true
}
]
}
] }

 - http:\/\/c.m.163.com\/nc\/article\/BVEGO8UT05299OU6\/full.html
##五、实现瀑布流滚动

![示例图](https://img.haomeiwen.com/i1333977/3ccf3288fde30684.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

HTML结构

CSS样式

*{
margin: 0;
padding: 0;
}

img{
vertical-align: top;
}

main{

/*用于子盒子定位*/
position: relative;

}

.box{
float: left;
padding: 15px 0 0 15px;
/background-color: red;/
}

.pic{
padding: 10px;
background-color: #ffffff;
border: 1px solid #ccc;
border-radius: 5px;
}

.pic img{
width: 165px;
}

JS特效

/**

Created by Administrator on 2016/12/29.
/
/*

当页面加载完毕
*/
window.onload = function(){
// 1. 实现瀑布流布局
waterFall('main', 'box');
// 2. 滚动加载盒子
window.onscroll = function(){
// 2.1 判断是否具备加载新盒子的条件
if(checkWillLoadNewBox()){ // 加载新的盒子
// 2.2 造数据
var dataArr = [
{src: '19.jpg'},
{src: '32.jpg'},
{src: '7.jpg'},
{src: '9.jpg'},
{src: '13.jpg'},
{src: '15.jpg'},
{src: '17.jpg'},
{src: '19.jpg'}
];

     // 2.3 根据数据创建新的盒子
     for(var i=0; i<dataArr.length; i++){
         var newBox = document.createElement('div');
         newBox.className = 'box';
         $('main').appendChild(newBox);

         var newPic = document.createElement('div');
         newPic.className = 'pic';
         newBox.appendChild(newPic);

         var newImg = document.createElement('img');
         newImg.src = 'images/'+ dataArr[i].src;
         newPic.appendChild(newImg);
     }

     // 2.4 实现瀑布流布局
     waterFall('main', 'box');
 }

}
};

/**

实现瀑布流布局
@param parent 父元素id
@param child 子元素class
*/
function waterFall(parent, child){
// ---- 父盒子居中 ---
// 1. 拿到所有的盒子
var allBox = $(parent).getElementsByClassName(child);
// 2. 求出其中一个盒子的宽度
var boxWidth = allBox[0].offsetWidth;
// 3. 求出屏幕的宽度
var clientW = document.documentElement.clientWidth || document.body.clientWidth;
// 4. 求出列数
var cols = parseInt(clientW / boxWidth);
// 5.让父盒子居中
$(parent).style.width = cols * boxWidth + 'px';
$(parent).style.margin = '0 auto';

// ---- 子盒子的定位 ---
var heightArr = [];
// 1.遍历所有的盒子
for(var i=0; i<allBox.length; i++){
// 1.1 拿到所有盒子的高度
var boxHeight = allBox[i].offsetHeight;
// 1.2 把第一行盒子的高度放入数组
if(i < cols){
heightArr.push(boxHeight);
}else { // 剩余的盒子
var minBoxHeight = Math.min.apply(null, heightArr);
var minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);
// 子盒子定位
allBox[i].style.position = 'absolute';
allBox[i].style.left = minBoxIndex * boxWidth + 'px';
allBox[i].style.top = minBoxHeight + 'px';
// 更新高度
heightArr[minBoxIndex] += boxHeight;
}
}
}

/**

获取最小索引
@param arr 数组
@param val 元素
*/
function getMinBoxIndex(arr, val){
for(var i=0; i<arr.length; i++){
if(arr[i] == val) return i;
}
}

/**

判断是否符合加载条件
/
function checkWillLoadNewBox(){
// 1. 获取最后一个盒子
var allBox = $('main').getElementsByClassName('box');
var lastBox = allBox[allBox.length - 1];
// 2. 求出最后一个盒子高度的一半 + offsetTop
var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;
// 3. 求出屏幕的高度
var clientH = document.documentElement.clientHeight || document.body.clientHeight;
// 4. 求出滚动的高度
var scrollTop = scroll().top;
/console.log(lastBoxDis, clientH, scrollTop);*/
// 5. 判断返回
return clientH + scrollTop >= lastBoxDis;
}

MyFunc.js

/**

Created by Administrator on 2016/12/29.
/
/*
获取滚动的头部和左侧偏离位置
@returns {头部, 左边}
scroll().top scroll().left
*/
function scroll(){
if(window.pageXOffset != null){ // ie9+ 和最新浏览器
return {
top: window.pageYOffset,
left: window.pageXOffset
}
}else if(document.compatMode == 'CSS1Compat'){ // 遵循W3C
return {
top: document.documentElement.scrollTop,
left: document.documentElement.scrollLeft
}
}
return {
top: document.body.scrollTop,
left: document.body.scrollLeft
}
}

/**

根据id快速获取标签
@param id
@returns {Element}
*/
function $(id){
return document.getElementById(id);
}



![瀑布流特效](https://img.haomeiwen.com/i1333977/81da10d6ea9beedc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

商品展示特效

一、水平滚动条和垂直滚动条

二、内置对象document

CSS1Compat：标准兼容模式开启

三、scroll家族

3.1 基本概念

3.2 处理scroll家族浏览器适配问题

ie9+ 和最新浏览器

main{

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

商品展示特效

一、水平滚动条 和 垂直滚动条

二、内置对象document

CSS1Compat：标准兼容模式开启

三、scroll家族

3.1 基本概念

3.2 处理scroll家族浏览器适配问题

ie9+ 和 最新浏览器

main{

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

一、水平滚动条和垂直滚动条

ie9+ 和最新浏览器