广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >JavaScript中transform如何实现数字翻页效果
  • 812

0
分享到

JavaScript中transform如何实现数字翻页效果

2024-04-02 19:04:59 812人浏览 安东尼
摘要

这篇文章主要为大家展示了“javascript中transfORM如何实现数字翻页效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JavaScript中tra

这篇文章主要为大家展示了“javascript中transfORM如何实现数字翻页效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JavaScript中transform如何实现数字翻页效果”这篇文章吧。

效果图：

JavaScript中transform如何实现数字翻页效果

图（1）初始图

JavaScript中transform如何实现数字翻页效果

图（2）翻页过程

JavaScript中transform如何实现数字翻页效果

图（3）翻页结果

代码如下：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>transition</title>
 <style>
 #container{ width:500px; height:500px; margin:20px auto; background:#ff0000;
 -WEBkit-transiton:background 2s linear,width 2s,height 2s;
 -moz-transition:background 2s,width 2s,height 2s;
 -o-transition:background 2s,width 2s,height 2s;
 -ms-transition:background 2s,width 2s,height 2s;
 transition:background 2s,width 2s,height 2s;
 }
 #container:hover{ background: #00ff00;width:200px;height: 200px;}
 #my3Dspace{
 -webkit-perspective:800;
 -webkit-perspective-origin:50% 50%;
 overflow: hidden;
 }
 #pagegroup{
 width: 400px;
 height: 400px;
 margin: 0 auto;
 -webkit-transform-style:preserve-3d;
 position: relative;
 }
 .page{
 width: 360px;
 height: 360px;
 padding: 20px;
 background-color: black;
 color: white;
 font-size: 360px;
 font-weight: blod;
 line-height: 360px;
 text-align: center;
 position: absolute;
 }
 #page1{
 -webkit-transform-origin:top;
 transform-origin:top;
 -webkit-transition:-webkit-transform 1s linear;
 transition:transform 1s linear;
 }
 #page2,#page3,#page4,#page5,#page6{
 -webkit-transform-origin:top;
 transform-origin:top;
 -webkit-transition:-webkit-transform 1s linear;
 transition:transform 1s linear;
 -webkit-transform:rotateX(-90deg);
 transform:rotateX(-90deg);
 }
 #op{
 text-align: center;
 margin: 40px auto;
 }
 </style>
</head>
<body>
 <div id="my3dspace">
 <div id="pagegroup">
 <div class="page" id="page1">1</div>
 <div class="page" id="page2">2</div>
 <div class="page" id="page3">3</div>
 <div class="page" id="page4">4</div>
 <div class="page" id="page5">5</div>
 <div class="page" id="page6">6</div>
 </div>
 </div>
 <div id="op">
 <a href="javascript:next()" rel="external nofollow" >next</a>&nbsp;
 <a href="javascript:prev()" rel="external nofollow" >prev</a>
 </div>
 <script type="text/javascript">
 var curIndex = 1;
 function next(){
 if(curIndex==6)
 return;
 var curPage = document.getElementById("page"+curIndex);
 curPage.style.webkitTransform = "rotateX(90deg)";
 curPage.style.transform = "rotateX(90deg)";
 curIndex ++;
 var nextPage = document.getElementById("page"+curIndex);
 nextPage.style.webkitTransform="rotateX(0deg)";
 nextPage.style.transform="rotateX(0deg)";
 }
 function prev(){
 if(curIndex==1)
 return;
 var curPage =document.getElementById("page"+curIndex);
 curPage.style.webkitTransform="rotateX(-90deg)";
 curPage.style.transform="rotateX(-90deg)";
 curIndex --;
 var prevPage = document.getElementById("page"+curIndex);
 prevPage.style.webkitTransform="rotateX(0deg)";
 prevPage.style.transform="rotateX(0deg)";
 }
 </script>
</body>
</html>

以上是“JavaScript中transform如何实现数字翻页效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网VUE频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript中transform如何实现数字翻页效果

本文链接: https://www.lsjlt.com/news/68509.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • JavaScript中transform如何实现数字翻页效果
    这篇文章主要为大家展示了“JavaScript中transform如何实现数字翻页效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JavaScript中tra...
    99+
    2022-10-19
  • Android如何实现仿日历翻页、仿htc时钟翻页、数字翻页切换效果
    这篇文章主要为大家展示了“Android如何实现仿日历翻页、仿htc时钟翻页、数字翻页切换效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Android如何实现仿日历翻页、仿htc时钟翻页、数...
    99+
    2023-05-31
    android
  • javaScript+turn.js如何实现图书翻页效果
    小编给大家分享一下javaScript+turn.js如何实现图书翻页效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！首先附上...
    99+
    2022-10-19
  • Bootstrap如何实现翻页效果
    这篇文章主要介绍Bootstrap如何实现翻页效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！效果图最后一页时：最开始一页时：实现①、翻页组件的布局<%@ page...
    99+
    2022-10-19
  • css3翻牌翻数字效果怎么实现
    这篇文章将为大家详细讲解有关css3翻牌翻数字效果怎么实现，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。效果图如下：没有具体说做什么效果，但是想着纯数字转换太简单了，然后就顺手做了一个翻牌的效果。效果预览...
    99+
    2023-06-08
  • css如何实现数字分页效果
    本篇内容介绍了“css如何实现数字分页效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！CSS如何实现数字...
    99+
    2022-10-19
  • Android中怎么实现手势翻页效果
    这篇文章将为大家详细讲解有关Android中怎么实现手势翻页效果，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。activity_main.xml布局界面代码：<xml ver...
    99+
    2023-05-30
    android
  • ajax翻页效果模仿yii框架如何实现
    这篇文章主要介绍了ajax翻页效果模仿yii框架如何实现，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。<!DOCTYPE h...
    99+
    2022-10-19
  • css如何实现翻转效果
    这篇文章主要介绍css如何实现翻转效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！css实现翻转效果的方法：首先创建一个演示方块，并为其添加transition和transform属性；然后将transition属...
    99+
    2023-06-14
  • 如何使用vue中实现翻页组件vue-flip-page效果
    小编给大家分享一下如何使用vue中实现翻页组件vue-flip-page效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！方法c...
    99+
    2022-10-19
  • CSS3如何实现3D翻书效果
    小编给大家分享一下CSS3如何实现3D翻书效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！先上效果图：（样式有点丑，可以忽略一下下，效果出来了就好，后期加到其他项目中方便更改0.0）类似...
    99+
    2022-10-19
  • css3如何实现3d翻转效果
    今天小编给大家分享的是css3如何实现3d翻转效果，相信很多人都不太了解，为了让大家更加了解，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计...
    99+
    2023-06-14
  • JavaScript如何实现余额数字滚动效果
    今天就跟大家聊聊有关JavaScript如何实现余额数字滚动效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。1.实现背景上周在一个完成任务领取红包的活动需求中，需要实现一个用户点击...
    99+
    2023-06-22
  • android中图片翻页效果简单的实现方法
    代码如下:public class PageWidget extends View {    private Bitmap foreImage;...
    99+
    2022-06-06
    方法 图片 Android
  • css怎么实现数字分页效果
    本篇内容介绍了“css怎么实现数字分页效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！相当数量的网站都使用数字分页效果，例如本站的分页也是...
    99+
    2023-06-08
  • Android如何实现翻转动画效果（卡片翻转）
    目录前言需求一、先介绍三个插值器二、实现步骤1.效果图2.布局3.逻辑判断（是否隐藏）4.翻转动画5.bug出现6.bug解决三、源码四、总结前言 最近好友问计蒙翻转动画，恰好在大...
    99+
    2022-11-12
  • Android如何实现平滑翻动效果
    这篇文章给大家分享的是有关Android如何实现平滑翻动效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。具体内容如下效果activity加implementsimplements GestureDet...
    99+
    2023-06-14
  • css3如何实现立体翻转效果
    今天给大家介绍一下css3如何实现立体翻转效果。文章的内容小编觉得不错，现在给大家分享一下，觉得有需要的朋友可以了解一下，希望对大家有所帮助，下面跟着小编的思路一起来阅读吧。在css3中，可以利用trans...
    99+
    2022-10-19
  • css3如何实现垂直翻转效果
    这篇文章主要介绍“css3如何实现垂直翻转效果”，在日常操作中，相信很多人在css3如何实现垂直翻转效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css3如何实现垂直翻转...
    99+
    2022-10-19
  • css3如何实现翻转2次效果
    这篇文章给大家分享的是有关css3如何实现翻转2次效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 方法：1、用“@keyframes 名称{100...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作