模拟手指翻书的效果

紫微前端

于 2021-06-18 09:25:32 发布

阅读量260

点赞数

CC 4.0 BY-SA版权

分类专栏：原生javascript制作各种酷炫组件

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/118015715

原生javascript制作各种酷炫组件专栏收录该内容

157 篇文章 ¥89.90 ¥99.00

订阅专栏

本文详细介绍了如何使用HTML5、CSS3和JavaScript技术，结合触摸事件，模拟真实的手指翻书效果，让读者在数字设备上也能体验到犹如翻阅纸质书一样的交互感受。内容涵盖3D变换、动画制作和事件监听等关键技术点。

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

<html>

<head>
    <meta charset="utf-8">

    <style>
        * {
            box-sizing: border-box;
        }
    </style>

</head>

<body style="padding:300px">
    <img id="img" src="1.png" style="width:200px;height:400px" alt="">
    <div id="mask" style="position:fixed;width:1000px;height:1000px;overflow: hidden;">
        <img id="im" src="1.jpg" style="position:fixed;width:200px;height:400px;display:none" alt="">
    </div>
    <script>
        var book = document.querySelector("#img");
        var obj = book.getBoundingClientRect();
        var

了解本专栏