jQuery 动画
2018-05-10 本文已影响0人
LiLi原上草
最近有一官网的需求要来，想想，为了更好的照顾那些石器时代的人使用的浏览器，还是考虑用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" src="./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>
