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