DIV动态/动画切换效果

最新推荐文章于 2024-04-11 05:37:43 发布

泡泡菌

最新推荐文章于 2024-04-11 05:37:43 发布

阅读量4.2k

点赞数

分类专栏： HTML CSS javascrip 文章标签： html 布局 javascript CSS 动画

本文链接：https://blog.csdn.net/Junpaopao/article/details/78099580

版权

javascrip 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

<!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>

泡泡菌

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DIV动态/动画切换效果

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="../common/jquery-3.1.1.js" type="text/javascript">script> style> .box{position: relative}
复制链接

扫一扫