jquery实现来回翻转效果

最新推荐文章于 2021-12-07 09:41:26 发布

背着吉他的蝙蝠女侠

最新推荐文章于 2021-12-07 09:41:26 发布

阅读量2.1k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/echokkk/article/details/78820393

版权

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文演示了如何使用jQuery创建来回翻转效果。通过检查ID的存在并动态添加，实现了元素的翻转动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo代码如下：注意：是通过判断是否存在某种ID值，然后添加id实现的。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <scrip class="sr"></scrip>  
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  
    <style type="text/css">  
        .box {  
            width: 200px;  
            height: 200px;  
            position: relative;  
        }  
        .box1,.box2 {  
            width: 200px;  
            height: 200px;  
            position: absolute;  
            top: 0;  
            left: 0;  
            text-align: center;  
            line-height: 200px;   
            font-size: 50px;  
            backface-visibility: hidden;  
            background: red;  
            transition: all 3s;  
        }  
        .box1 {  
            background: red;  
            transform: rotateY(-180deg);  
        }  
        .box2 {  
            background: blue; 
        }  
        #box2 {  
            transform: rotateY(180deg);  
        }  
        #box1 {  
            transform: rotateY(0deg);  
        }    
    </style>  
</head>  
<body>  
    <div class="box">  
        <div class="box1">CCCC</div>  
        <div class="box2">BBBB</div>  
    </div>  
    <script type="text/javascript">  
        $(".box").click(function(){  
            if($(".box1").attr("id") == undefined || $(".box1").attr("id") === ""){  
                $(".box1").attr("id","box1");  
            }else if($(".box1").attr("id") === "box1") {  
                $(".box1").attr("id","");  
            }  
            if($(".box2").attr("id") == undefined || $(".box2").attr("id") === "box1"){  
                $(".box2").attr("id","box2");  
            }else if($(".box2").attr("id") === "box2") {  
                $(".box2").attr("id","box1");  
            }  
        });  
    </script>  
</body>  
</html>