页面切换动画效果1 - 左右切换

本文介绍如何通过jQuery创建页面切换动画效果。点击Next按钮,页面会进行左右切换动画。利用preventDefault防止默认跳转,添加/移除move类控制页面移动,实现平滑的页面过渡。

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

在线演示

点击Next按钮后触发页面切换动画,借助jQuery来实现这一交互功能。

这里写图片描述

html:

<article id="tablet">
    <img src="images/05.jpg" alt="tablet">
    <h1>Comprehensam</h1>
    <p>Tablets, tablets, ...right one for you.</p>
    <a href="#wifi">Next</a>
  </article>

  <article id="wifi">
    <img src="images/06.jpg" alt="wifi">
    <h1>Adversarium</h1>
    <p>Our Tablet Buying Guide and Tablet ... after all.</p>
    <a href="#tablet">Next</a>
  </article>

css:

html,body {height: 100%;}
body {
  margin: 0;
  padding: 0;
  text-align: center;
  color: #fff;
  overflow: hidden;
  position: relative;
}
article {
  position: absolute;
  top: 0;

  width: 100%; /*铺满整个屏幕*/
  height: 100%;
  padding: 100px;
  box-sizing: border-box;

  -webkit-transition: all 1s ease-in-out; /*ease-in-out 动画开始时速度很慢,然后速度加快,然后速度放慢*/
  transition: all 1s ease-in-out;
}
#tablet {
  background-color: #4ac4aa;
  left: 0;
}
#wifi {
  background-color: #ea5634;
  left: 100%;
}
h1 {
  font-size: 4em;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  padding-bottom: 30px;
}
p {
  color: rgba(255, 255, 255, .8);
  margin-bottom: 30px;
}
a {
  font-size: 1.5em;
  padding: 5px 50px;
  border: 1px solid #fff;
  border-radius: 4px;
  text-decoration: none;
  color: #fff;
}

#tablet.move {/* #tablet添加类后向左运动 */
  left: -100%;
}
#wifi.move {/* #wifi添加类后向左运动 */
  left: 0;
}

js:

<script>
  $(document).ready(function() {
    $('a').click(function(e) {
      e.preventDefault();
      $('#tablet').toggleClass('move');
      $('#wifi').toggleClass('move');
    });
  });
</script>

解析:
我们为两个页面中的a元素设置了相同的功能函数。在函数中,首先调用了click事件对象的preventDefault方法,其目的是阻止超链接的默认锚点跳转动作。接下来,使tablet和wifi两个页面分别切换名为move的类,也就是说当这两个页面没有move类时将添加这个类,反之则去除这个类。move类的作用将使得页面在切换后移动到目的位置。
我们设想的页面切换效果是单击tablet页面中的Next按钮时,该页面向左移动到屏幕之外,同时wifi页面从屏幕右侧向左移动到屏幕中央,完成切换过程。因此对于tablet而言,其目标位置为屏幕左侧以外,即left属性为-100%的位置,而wifi的目标位置则是left属性为0;
当切换到wifi页面后,单击其中的Next按钮,此时tablet和wifi中的move类将同时被去除,两者将向右移动,回到其初始位置。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值