jQuery animate事件卷轴打开动画效果-jquery案例-前端日记簿

首页 jquery案例正文

jQuery animate事件卷轴打开动画效果

2023-12-01 77

效果图：

在案例中当页面加载完之后卷轴就会从中间向俩边打开并且在完全打开之后文字会逐渐显示出来

html：

在box中设置五个div 分别为左右的卷轴部分以及文字区域

在css中通过定位以及层级的方式对卷轴内容区域进行隐藏只显示俩侧

     .box1-pic {
        background: url(./img/j1.png) no-repeat right 0;
        position: absolute;
        width: 50px;
        height: 460px;
        left: 400px;
        top: 1px;
        z-index: 2;
      }
      .box2-pic {
        background: url(./img/j4.png) no-repeat left 0;
        position: absolute;
        right: 400px;
        top: 0;
        z-index: 2;
        width: 50px;
        height: 460px;
      }
      .box1-bg {
        background: url(./img/j2.png) right 0 no-repeat;
        position: absolute;
        top: -3px;
        left: 430px;
        z-index: 1;
        width: 25px;
        height: 459px;
      }
      .box2-bg {
        background: url(./img/j3.png) 0 0 no-repeat;
        position: absolute;
        top: -4px;
        right: 430px;
        z-index: 1;
        width: 25px;
        height: 459px;
      }
      .main {
        display: none;
        overflow: hidden;
        zoom: 1;
        position: absolute;
        z-index: 5;
        width: 530px;
        height: 280px;
        left: 145px;
        top: 90px;
        color: #2e2e2e;
      }

预览：

紧接着就是在js中对每一个demo进行animate设置给他们设置不同的动画事件包括宽度以及位置当卷轴完全显示之后对文字demo 进行淡入设置

  $(document).ready(function () {
    $(".box1-pic").animate({ left: "95px", top: "-4px" }, 1300);
    $(".box2-pic").animate({ right: "-23px", top: "-5px" }, 1450);
    $(".box1-bg").animate({ width: "433px", left: "73px" }, 1500);
    $(".box2-bg").animate({ width: "433px", right: "-38px" }, 1500, function () {
      $(".main").fadeIn("show");
    });
  });

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery animate事件卷轴打开动画效果</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        font-size: 14px;
        background: #6f0b02;
        display: flex;
        justify-content: center;
      }
      .box {
        position: relative;
        width: 900px;
        height: 460px;
      }
      .box1-pic {
        background: url(./img/j1.png) no-repeat right 0;
        position: absolute;
        width: 50px;
        height: 460px;
        left: 400px;
        top: 1px;
        z-index: 2;
      }
      .box2-pic {
        background: url(./img/j4.png) no-repeat left 0;
        position: absolute;
        right: 400px;
        top: 0;
        z-index: 2;
        width: 50px;
        height: 460px;
      }
      .box1-bg {
        background: url(./img/j2.png) right 0 no-repeat;
        position: absolute;
        top: -3px;
        left: 430px;
        z-index: 1;
        width: 25px;
        height: 459px;
      }
      .box2-bg {
        background: url(./img/j3.png) 0 0 no-repeat;
        position: absolute;
        top: -4px;
        right: 430px;
        z-index: 1;
        width: 25px;
        height: 459px;
      }
      .main {
        display: none;
        overflow: hidden;
        zoom: 1;
        position: absolute;
        z-index: 5;
        width: 530px;
        height: 280px;
        left: 145px;
        top: 90px;
        color: #2e2e2e;
      }
      .init-text {
        margin: 10px 0 0 44px;
        line-height: 1.8;
        text-indent: 30px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1-pic"></div>
      <div class="box2-pic"></div>
      <div class="box1-bg"></div>
      <div class="box2-bg"></div>
      <div class="main">
        <p class="init-text">传统音乐是在以典河流域为中心的中原音乐和四域音乐以及外国音乐的交流融合之中形成发展起来的。</p>
      </div>
    </div>
  </body>
</html>
<script src="./js/jquery.js"></script>
<script>
  $(document).ready(function () {
    $(".box1-pic").animate({ left: "95px", top: "-4px" }, 1300);
    $(".box2-pic").animate({ right: "-23px", top: "-5px" }, 1450);
    $(".box1-bg").animate({ width: "433px", left: "73px" }, 1500);
    $(".box2-bg").animate({ width: "433px", right: "-38px" }, 1500, function () {
      $(".main").fadeIn("show");
    });
  });
</script>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=236

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。