亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

jQuery 動畫

標簽:
JQuery

最近有一官网的需求要来,想想,为了更好的照顾那些石器时代的人使用的浏览器,还是考虑用jquery来做了;因为好久没有用jQ了,感觉都有点遗忘了,正好官网上也有要实现的动画,就随手写了两小示例,做个随手笔记吧;

<!DOCTYPE html><html><head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        * {padding:0; margin: 0;}        #banner{            float: left;            margin-left: 100px;
        }        #animation{            float: left;            margin-left: 100px;            margin-top: 50px;
        }        .backBox {            border: 2px solid red;            width: 200px;            height: 500px;            margin : 50px auto; 
            position: relative;
        }        .movingNode {            width: 200px;            height: 100px;            display: block;            line-height: 120px;            position: absolute;
        }        .movingNode p {            display: inline-block;            height: 40px;            width: 100%;            background-color: green;
        }        ul {            position: relative;
        }        ul li {            position: absolute;            list-style: none;            height: 200px;            width: 200px;
        }    </style>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./jquery-3.2.1.js"></script></head><body>
    <div id="banner">
        <div class="backBox">
        </div>
    </div>
    <div id="animation">
        <ul>
            <li style="background-color: red; display: block"></li>
            <li style="background-color: yellow; display: none"></li>
            <li style="background-color: blue; display: none"></li>
            <li style="background-color: pink; display: none"></li>
        </ul>
    </div></body> </html><script type="text/javascript">
    let parent = $('.backBox');    let imgs = $('li');    let moveNode = `<span class="movingNode"><p></p></span>`

    upwardRound(parent, moveNode, 800, 100);
    chengImgGif(imgs, 1000);    
    function upwardRound (parentNode, moveNode, speed, height) {        let no = setInterval(function () {
            creatMoveItem();
        }, speed);        function creatMoveItem () {            let movingNode = $(moveNode);
            movingNode.css({                'top': height * 4 + 'px',                'opacity': '0'
            });
            parentNode.append(movingNode);

            movingNode
            .animate({                'opacity': '1',                'top':  height * 3 + 'px'
            }, speed, 'linear', function () {
                
            })
            .animate({                'top': height + 'px'
            }, speed*2, 'linear', function () {
                
            })
            .animate({                'opacity': '0',                'top': '0'
            }, speed, 'linear', function () {
                movingNode.remove();
            })
        }
    }    function chengImgGif(nodes, IntervalTime) {        let count = 0;        let no1 = setInterval(function () {
            changeImg(nodes);
        }, IntervalTime);        function changeImg (nodes) {
            count ++;            if (count == nodes.length) {
                count = 0;
            }            for (let i = 0; i < imgs.length; i ++) {
                $(imgs[i]).css('display', 'none');
            }
            $(imgs[count]).css('display', 'block');
        }
    }     
</script>



作者:天上的牛_No1
链接:https://www.jianshu.com/p/9d4933722ffc


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消