jquery实现来回翻转效果

来源：互联网发布：itools怎么下载软件编辑：程序博客网时间：2024/04/29 16:49

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>

阅读全文

0 0