h5效果记录

记录一下前段时间工作中使用到的h5的效果，方便以后需要时翻出来看看。

滚动中的进度条，代码：

<div class="bottom">
    <i class="bg"></i>
    <i class="wrap">
        <i class="curr"></i>
    </i>
</div>
<style>
    .bottom {
        width: 350px;
        height: 12px;
        position: relative;
        overflow: hidden;
    }
    .bg {
        background: linear-gradient(270deg, #FC4D51 0%, #FCA13F 100%);
        opacity: 0.23;
        position: absolute;
        border-radius: 8px;
        width: 100%;
        height: 100%;
    }
    .wrap {
        height: 12px;
        position: absolute;
        z-index: 2;
        width: 70%; /* js动态控制长度 */
        overflow: hidden;
        border-radius: 8px;
        background: linear-gradient(270deg, #FC4D51 0%, #FCA13F 100%);
    }

    .curr {
        display: inline-block;
        height: 250px;
        width: 100%;
        background-size: 24px 24px; /* 控制条纹的大小 */
        background-image: linear-gradient(-45deg, rgba(255, 255, 255, .5) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .5) 75%,
        transparent 75%, transparent); /** 条纹样式 **/
        animation: loop 4s linear infinite;
    }

    @keyframes loop {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-120px)
        }
    }
</style>

---

无限翻滚的banner，使用css+@keyframes，当滚到最后一项时，会回到第一项，有视觉差，借助js，可以消除。代码

<div class="loop">
    <section class="inner">
        <label>商品描述1</label>
        <label>商品描述2</label>
        <label>商品描述3</label>
        <label>商品描述4</label>
    </section>
</div>

<style>
    .loop {
        height: 22px;
        overflow: hidden;
        position: relative;
        margin-top: 2%;
        cursor: pointer;
        padding-right: 10px;
    }

    .inner {
        transform: translateY(0);
    }

    .inner label {
        display: block;
        overflow: hidden;
        height: 22px;
        line-height: 22px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<script>
    var animate = document.querySelectorAll(".inner");// 当前页可能有多个轮播
    for (var i = 0; i < animate.length; i++) {
        run(animate[i], -1);
    }

    function run(wrap, labelHeight) {
        var mount = wrap.querySelectorAll('label')
        if (!mount || mount.length <= 1) return;
        var t = wrap.firstElementChild;
        labelHeight == -1 && (labelHeight = -1 * t.offsetHeight);
        t = t.cloneNode(true);
        wrap.appendChild(t)
        setTimeout(function () {
            start(wrap, mount.length, 0, labelHeight)
        }, 2000);// 首次轮播时间间隔
    }


    function start(wrap, labelCount, current, labelHeight) {
        moveAnimation(wrap, current, labelHeight)
        setTimeout(function () {
            current = (current + 1) % labelCount;
            start(wrap, labelCount, current, labelHeight)
        }, 5000);// 轮播间隔时间
    }

    function moveAnimation(moveElement, current, labelHeight) {
        var fm = current * labelHeight;
        loop(fm, labelHeight)

        function loop(fm, preStep) {
            var temp = arguments.callee;
            moveElement.style.transform = 'translateY(' + fm + 'px)'
            if (preStep != 0) {
                fm = fm - 1;
                preStep = preStep + 1;
                requestAnimationFrame(function () {
                    temp(fm, preStep)
                })
            }
        }
    }
</script>

---

加入收藏效果：
先计算图片相对于视窗的位置，再计算图片最后落点的位置，然后使用css动带或者jquery动画完成，demo代码

<div>
    <section class="outer">
        <img id="img_outer"
             src="http://img.alicdn.com/imgextra/i4/705886785/O1CN011xpPjm1zzZvawZpIj_!!705886785.jpg_310x310.jpg">
    </section>
    <div>
        <span id="join">加入收藏</span>
    </div>
</div>

<div class="cart" id="cart"></div>
<style>
    .outer img {
        width: 100%;
    }

    .outer {
        display: inline-block;
        width: 150px;
        height: 150px;
    }

    .cart {
        position: fixed;
        width: 50px;
        height: 50px;
        bottom: 30px;
        right: 30px;
        border-radius: 4px;
        border: 1px solid #f40;
        box-sizing: border-box;
        z-index: 2;
        background-color: #096dd9;
    }
</style>
<script src="./jquery-2.1.1.min.js"></script>

<script>


    var join = document.getElementById('join')
    join.onclick = function () { // 点击触发画动事例
        var img_outer = document.getElementById('img_outer') // 取需要动画的图片dom
        fly(img_outer)
    }

    var cart = document.getElementById("cart"); // 动画结束落点

    // 图片dom
    function fly(img) {
        var fixedImage = new Image()
        fixedImage.src = img.getAttribute('src');
        fixedImage.onload = function () {
            animation1(this,img);
            // animation2(this,img);
        }
    }

    // jquery版本
    function animation2(orig, img) {
        var eleLoc = getDomLocation(img);
        var style = eleLoc
        style.position = 'fixed';
        document.body.append(orig)
        var cp = getDomLocation(cart);
        var endStyle = cp
        $(orig).css(style).animate(endStyle, 1000, 'swing', function () {
            $(orig).css({opacity: 0}).remove()
        })
    }

    // 原生js版本
    function animation1(orig, img) {
        var eleLoc = getDomLocation(img);
        var style = []
        style.push('position:fixed')
        style.push('transition: all 1s ease-in-out')
        style.push('top:' + eleLoc.top + "px")
        style.push('left:' + eleLoc.left + 'px')
        style.push('width:' + eleLoc.width + 'px')
        style.push('height:' + eleLoc.height + 'px')
        // 这里可以给元素用class来表示共用样式
        orig.setAttribute('style', style.join(";"));
        document.body.append(orig)
        var cp = getDomLocation(cart);
        orig.style.width = cp.width + "px";
        orig.style.height = cp.height + "px";
        orig.style.top = cp.top + "px";
        orig.style.left = cp.left + "px";
        setTimeout(function () {
            orig.remove()
        }, 1000)
    }

    function getDomLocation(dom) {
        if (!dom) return {};
        var rect = dom.getBoundingClientRect();
        // 对于低版本浏览器这里需要做兼容计算
        return {
            top: rect.top,
            left: rect.left,
            width: dom.offsetWidth,
            height: dom.offsetHeight
        }
    }

</script>