每天10个前端知识点：运动框架应用篇(上)

个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

本次内容：仿jiaThis分享到、幻灯片、手风琴、多图片中心展开

1. 仿jiaThis分享到

JiaThis - 社会化分享按钮及移动端分享代码提供商！

<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        overflow: hidden;
    }
    #box {
        position: absolute;
        right: -140px;
        top: 50%;
        margin-top: -75px;
        padding: 20px;
        width: 100px;
        height: 150px;
        background: rgba(0, 0, 0, .1);
        color: #fff;
        font-size: 20px;
    }
    #box span {
        position: absolute;
        left: -20px;
        width: 20px;
        height: 60px;
        line-height: 20px;
        background: #fe0;
        color: #fff;
        font-size: 12px;
        text-align: center;
    }
</style>

    <div id="box">
        <span>分享到</span>
        <p>QQ</p>
        <p>WeChat</p>
        <p>sina</p>
    </div>

<script type="text/javascript" src='move.js'></script>
<script type="text/javascript">
    window.onload = function() {
        var oBox = document.getElementById('box');
        var oSpan = oBox.children[0];

        oBox.onmouseover = function() {
            move(oBox, {right: 0}, {duration: 300});
        }

        oBox.onmouseout = function() {
            move(oBox, {right: -140}, {duration: 300});
        }
    }
</script>

效果示例

2. 幻灯片

<style>
    * {
        margin: 0;
        padding: 0;
    }
    #box {
        position: relative;
        margin: 50px auto;
        width: 400px;
        height: 300px;
        overflow: hidden;
    }
    ul {
        position: absolute;
        top: 0;
        left: 0;
        width: 1200px;
        height: 250px;
    }
    ul li {
        width: 400px;
        height: 250px;
        float: left;
        list-style: none;
    }
    ul li img {
        width: 100%;
        height: 100%;
    }
    ol {
        position: absolute;
        left: 50%;
        bottom: 50px;
        margin-left: -45px;
    }
    ol li {
        margin: 10px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid #fff;
        font-size: 8px;
        text-align: center;
        line-height: 10px;
        color: #fff;
        cursor: pointer;
    }
    ol li.active {
        background: #ccc;
    }
</style>

    <div id="box">
        <ul>
            <li>![](img/slide1.jpg)</li>
            <li>![](img/slide2.jpg)</li>
            <li>![](img/slide3.jpg)</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>

<script type="text/javascript" src='move.js'></script>
<script type="text/javascript">
    window.onload = function() {
        var oBox = document.body.children[0];
        var oUl = oBox.children[0];
        var oOl = oBox.children[1];
        var aLi = oUl.children;
        var aLi2 = oOl.children;

        for(var i = 0; i < aLi2.length; i++) {
            aLi2[i].index = i;
            (function(index) {
                aLi2[i].onmouseover = function() {
                    for(var i = 0; i < aLi2.length; i++) {
                        aLi2[i].className = '';
                    }
                    this.className = 'active';
                    move(oUl, {marginLeft: - this.index * aLi[0].offsetWidth}, {duration: 500});
                }
            })(i);
        }
    }
</script>

效果示例

3. 手风琴

<style>
    * {
        margin: 0;
        padding: 0;
    }
    #box {
        position: relative;
        margin: 50px auto;
        width: 380px;
        height: 200px;
        overflow: hidden;
    }
    #box ul {
        width: 380px;
        height: 200px;
    }
    #box ul li {
        position: absolute;
        list-style: none;
        width: 380px;
        height: 200px;
    }
    #box ul li img{
        width: 100%;
        height: 100%;
    }
</style>

    <div id="box">
        <ul>
            <li>![](img/slide1.jpg)</li>
            <li>![](img/slide2.jpg)</li>
            <li>![](img/slide3.jpg)</li>
            <li>![](img/slide4.jpg)</li>
            <li>![](img/slide5.jpg)</li>
        </ul>
    </div>

<script type="text/javascript" src='move.js'></script>
<script type="text/javascript">
    window.onload = function() {
        var oBox = document.body.children[0];
        var oUl = oBox.children[0];
        var aLi = oUl.children;

        var w = 30;
        for(var i = 1; i < aLi.length; i++) {
            aLi[i].style.left = oBox.offsetWidth - (aLi.length - i) * w + 'px';
        }

        for(var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;
            aLi[i].onmouseover = function() {
                for(var i = 0; i < aLi.length; i++) {
                    if(i <= this.index) {
                        move(aLi[i], {left: i * w});  // 小于当前位置往右推
                    } else {
                        move(aLi[i], {left: oBox.offsetWidth - (aLi.length - i) * w});  // 大于当前位置往左推
                    }
                }
            }
        }
        }
</script>

效果示例

4. 多图片展开

这个示例是有问题的，展开的z-index没有调整好，在此求解！

<style>
    * {
        margin: 0;
        padding: 0;
    }
    #box {
        position: relative;
        margin: 50px auto;
        width: 660px;
    }
    #box ul {
        width: 660px;
    }
    #box ul li {
        float: left;
        list-style: none;
        margin: 10px;
        width: 200px;
        height: 100px;
    }
    #box ul li img {
        width: 100%;
        height: 100%;
    }
</style>

    <div id="box">
        <ul>
            <li>![](img/slide1.jpg)</li>
            <li>![](img/slide2.jpg)</li>
            <li>![](img/slide3.jpg)</li>
            <li>![](img/slide4.jpg)</li>
            <li>![](img/slide5.jpg)</li>
            <li>![](img/slide6.jpg)</li>
            <li>![](img/slide7.jpg)</li>
            <li>![](img/slide8.jpg)</li>
            <li>![](img/slide9.jpg)</li>
        </ul>
    </div>

<script type="text/javascript" src='move.js'></script>
<script type="text/javascript">
    window.onload = function() {
        var oBox = document.body.children[0];
        var oUl = oBox.children[0];
        var aLi = oUl.children;
        var bSin = false;

        var aPos = [];
        for(var i = 0; i < aLi.length; i++) {
            aPos[i] = {
                left: aLi[i].offsetLeft,
                top: aLi[i].offsetTop
            }
        }

        //浮动定位 -> 绝对定位
        for(var i = 0; i < aLi.length; i++) {
            aLi[i].style.position = 'absolute';
            aLi[i].style.left = aPos[i].left + 'px';
            aLi[i].style.top = aPos[i].top + 'px';
            aLi[i].style.margin = 0;
        }

        //移上中心放大动画
        for(var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;
            aLi[i].onmouseover = function() {
                if(bSin) return;
                bSin = true;
                for(var i = 0; i < aLi.length; i++) {
                    aLi[i].style.zIndex = 0;
                }
                move(this, {
                    width: 600,
                    height: 300,
                    left: 30,
                    top: 30
                });
                this.style.zIndex = 1;
            }

            aLi[i].onmouseout = function() {
                move(this, {
                    width: 200,
                    height: 100,
                    left: aPos[this.index].left,
                    top: aPos[this.index].top
                });
                bSin = false;
                // this.style.zIndex = 0;
            }
        }
    }
</script>

这个示例是有问题的，展开的z-index没有调整好，在此求解！

效果示例