DIV动态动画切换效果

xiaoxiao2021-02-28  18

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../common/jquery-3.1.1.js" type="text/javascript"></script> <style> .box{position: relative} .aa{width: 500px;height: 300px;background: orange;position: absolute;transition: all .3s;} </style> </head> <body> <div class="box"> <div class="aa" style="transform: scale(.5);left:0;top:-80px">1</div> <div class="aa" style="transform: scale(.5);left:300px;top:-80px">2</div> <div class="aa on" style="transform: scale(1);left:0;top:200px">3</div> </div> <script> $('.aa').click(function(){ var cl=$(this).attr('class'); var on_class=$(".on").attr("class"); console.log(on_class); if(cl.indexOf('on')>-1){ return false; } var on_style=$('.on').attr('style'); var click_style=$(this).attr('style'); $(this).attr('style',on_style); $('.on').attr('style',click_style); $('.on').attr('class',cl); $(this).attr("class",on_class); }) </script> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-1250011.html

最新回复(0)