最近有一官网的需求要来，想想，为了更好的照顾那些石器时代的人使用的浏览器，还是考虑用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 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦