邓辉 2023-05-07 20:40 采纳率: 50%
浏览 91

HTML+CSS+JavaScript实现书本翻页效果

img


（图1）

img

（图2）

img


（图3）
当鼠标悬停在书本边缘是会有一个书页准备翻页的动画（如图3），然后在点击左右两侧的按钮时书本会翻页（如图1）（这里要是能将左右两侧的按钮效果作用在书页上就更好了）最终的效果如图2（本人js初学者，如有需要用到js代码，请各位答主能做好备注，不胜感激）

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2023-05-07 21:00
    关注

    题注这个实际就是jBooklet翻书效果。源代码提取出来如下

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

    <title>jquery实现左右翻书效果</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <base href="https://www.jq22.com/demo/jquery-fanshu-150325215701/" />


    <script src="https://www.jq22.com/jquery/1.4.4/jquery.min.js"></script>

    <script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>

    <script src="booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>



    <link href="booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />

    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />



    <script src="cufon/cufon-yui.js" type="text/javascript"></script>

    <script src="cufon/ChunkFive_400.font.js" type="text/javascript"></script>

    <script src="cufon/Note_this_400.font.js" type="text/javascript"></script>

    <script type="text/javascript">/*

            Cufon.replace('h1,p,.b-counter');

            Cufon.replace('.book_wrapper a', {hover:true});

            Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});

            Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});

            Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'});*/

    </script>

</head>

<body>

    <div class="book_wrapper">
        <a id="next_page_button"></a>
        <a id="prev_page_button"></a>
        <div id="loading" class="loading">Loading pages...</div>
        <div id="mybook" style="display:none;">
            <div class="b-load">
                <div>
                    <img src="images/1.jpg" alt="" />
                    <h1>Slider Gallery中文</h1>
                    <p>
                        This tutorial is about creating a creative gallery with a

                        slider for the thumbnails. The idea is to have an expanding

                        thumbnails area which opens once an album is chosen.

                        The thumbnails will scroll to the end and move back to

                        the first image. The user can scroll through the thumbnails

                        by using the slider controls. When a thumbnail is clicked,

                        it moves to the center and the full image preview opens.
                    </p>

                    <a href="#" class="article">Article</a>

                    <a href="#" class="demo">Demo</a>

                </div>

                <div>

                    <img src="images/2.jpg" alt="" />

                    <h1>Animated Portfolio Gallery</h1>

                    <p>
                        Today we will create an animated portfolio gallery with jQuery.

                        The gallery will contain a scroller for thumbnails and a

                        content area where we will display details about the portfolio

                        item. The image can be enlarged by clicking on it, making

                        it appear as an overlay.
                    </p>

                    <a href="#" class="article">Article</a>

                    <a href="#" class="demo">Demo</a>

                </div>

                <div>

                    <img src="images/3.jpg" alt="" />

                    <h1>Annotation Overlay Effect</h1>

                    <p>
                        Today we will create a simple overlay effect to display annotations in e.g. portfolio

                        items of a web designers portfolio. We got the idea from the wonderful

                        portfolio of www.rareview.com where Flash is used to create the

                        effect. We will use jQuery.
                    </p>

                    <a href="#" class="article">Article</a>

                    <a href="#" class="demo">Demo</a>

                </div>

                <div>

                    <img src="images/4.jpg" alt="" />

                    <h1>Bubbleriffic Image Gallery</h1>

                    <p>
                        In this tutorial we will create a bubbly image gallery that

                        shows your images in a unique way. The idea is to show the

                        thumbnails of albums in a rounded fashion allowing the

                        user to scroll them automatically by moving the mouse.

                        Clicking on a thumbnail will zoom in a big circle and

                        the full image which will be automatically resized to

                        fit into the screen.
                    </p>

                    <a href="#" class="article">Article</a>

                    <a href="#" class="demo">Demo</a>

                </div>

                <div>

                    <img src="images/5.jpg" alt="" />

                    <h1>Collapsing Site Navigation</h1>

                    <p>
                        Today we will create a collapsing menu that contains vertical

                        navigation bars and a slide out content area. When hovering

                        over a menu item, an image slides down from the top and a

                        submenu slides up from the bottom. Clicking on one of the

                        submenu items will make the whole menu collapse like a card

                        deck and the respective content area will slide out.
                    </p>

                    <a href="https://www.jq22.com" target="_blank" class="article">Article</a>

                    <a href="#" class="demo">Demo</a>

                </div>

                <div>

                    <img src="images/6.jpg" alt="" />

                    <h1>Custom Animation Banner</h1>

                    <p>
                        In today’s tutorial we will be creating a custom animation banner with jQuery.

                        The idea is to have different elements in a banner that will

                        animate step-wise in a custom way.
                    </p>

                    <p>
                        We will be using the jQuery Easing Plugin and the jQuery 2D

                        Transform Plugin to create some nifty animations.
                    </p>

                    <a href="#" class="article">Article</a>

                    <a href="#" class="demo">Demo</a>

                </div>

                <div>

                    <img src="images/7.jpg" alt="" />

                    <h1>Full Page Image Gallery</h1>

                    <p>
                        In this tutorial we are going to create a stunning full page

                        gallery with scrollable thumbnails and a scrollable full

                        screen preview. The idea is to have a thumbnails bar at

                        the bottom of the page that scrolls automatically when

                        the user moves the mouse. When a thumbnail is clicked,

                        it moves to the center of the page and the full screen

                        image is loaded in the background.
                    </p>

                    <a href="#" class="article">Article</a>

                    <a href="#" class="demo">Demo</a>

                </div>

                <div>

                    <img src="images/8.jpg" alt="" />

                    <h1>Hover Slide Effect</h1>

                    <p>
                        Today we will create a neat effect with some images using

                        jQuery. The main idea is to have an image area with several

                        images that slide out when we hover over them, revealing

                        other images. The sliding effect will be random, i.e.

                        the images will slide to the top or bottom, left or

                        right, fading out or not. When we click on any area,

                        all areas will slide their images out.
                    </p>

                    <a href="#" class="article">Article</a>

                    <a href="#" class="demo">Demo</a>

                </div>

                <div>

                    <img src="images/9.jpg" alt="" />

                    <h1>Merging Image Boxes</h1>

                    <p>
                        Today we will show you a nice effect for images with jQuery.

                        The idea is to have a set of rotated thumbnails that,

                        once clicked, animate to form the selected image.

                        You can navigate through the images with previous

                        and next buttons and when the big image gets clicked

                        it will scatter into the little box shaped thumbnails again.
                    </p>

                    <a href="#" class="article">Article</a>

                    <a href="#" class="demo">Demo</a>

                </div>

                <div>

                    <img src="images/10.jpg" alt="" />

                    <h1>Compact News Previewer</h1>

                    <p>
                        Today we will create a news previewer that let’s you

                        show your latest articles or news in a compact way.

                        The news previewer will show some list of articles

                        on the left side and the preview of the article with a

                        longer description on the right. Once a news on the left

                        is clicked, the preview will slide in.
                    </p>

                    <a href="#" class="article">Article</a>

                    <a href="#" class="demo">Demo</a>

                </div>

                <div>

                    <img src="images/11.jpg" alt="" />

                    <h1>Overlay Effect Menu</h1>

                    <p>
                        In this tutorial we are going to create a simple menu

                        that will stand out once we hover over it by covering

                        everything except the menu with a dark overlay.

                        The menu will stay white and a submenu area will

                        expand. We will create this effect using jQuery.
                    </p>

                    <a href="#" class="article">Article</a>

                    <a href="#" class="demo">Demo</a>

                </div>

                <div>

                    <img src="images/12.jpg" alt="" />

                    <h1>Polaroid Photobar Gallery</h1>

                    <p>
                        In this tutorial we are going to create an image gallery

                        with a Polaroid look. We will have albums that will expand

                        to sets of slightly rotated thumbnails that pop out on hover.

                        The full image will slide in from the bottom once a thumbnail

                        is clicked. In the full image view the user can navigate

                        through the pictures or simply choose another thumbnail

                        to be displayed.
                    </p>

                    <a href="#" class="article">Article</a>

                    <a href="#" class="demo">Demo</a>

                </div>

                <div>

                    <img src="images/13.jpg" alt="" />

                    <h1>Pull Out Content Panel</h1>

                    <p>
                        In this tutorial we will create a content panel that

                        slides out at a predefined scroll position. It will

                        reveal a teaser with related content and it can be

                        expanded to full page size to show more. A custom

                        slider allows to scroll through many items in the

                        panel.
                    </p>

                    <a href="#" class="article">Article</a>

                    <a href="#" class="demo">Demo</a>

                </div>

                <div>

                    <img src="images/14.jpg" alt="" />

                    <h1>Thumbnails Navigation Gallery</h1>

                    <p>
                        In this tutorial we are going to create an extraordinary

                        gallery with scrollable thumbnails that slide out from a

                        navigation. We are going to use jQuery and some CSS3

                        properties for the style. The main idea is to have a

                        menu of albums where each item will reveal a horizontal

                        bar with thumbnails when clicked.
                    </p>

                    <a href="#" class="article">Article</a>
                    <a href="#" class="demo">Demo</a>
                </div>
            </div>
        </div>
    </div>


    <!-- The JavaScript -->



    <script type="text/javascript">
        $(function () {
            var $mybook = $('#mybook');
            var $bttn_next = $('#next_page_button');
            var $bttn_prev = $('#prev_page_button');
            var $loading = $('#loading');
            var $mybook_images = $mybook.find('img');
            var cnt_images = $mybook_images.length;
            var loaded = 0;
            //preload all the images in the book,

            //and then call the booklet plugin



            $mybook_images.each(function () {
                var $img = $(this);
                var source = $img.attr('src');
                $('<img/>').load(function () {
                    ++loaded;
                    if (loaded == cnt_images) {
                        $loading.hide();
                        $bttn_next.show();
                        $bttn_prev.show();
                        $mybook.show().booklet({
                            name: null,                            // name of the booklet to display in the document title bar
                            width: 800,                             // container width
                            height: 500,                             // container height
                            speed: 600,                             // speed of the transition between pages
                            direction: 'LTR',                           // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left
                            startingPage: 0,                               // index of the first page to be displayed
                            easing: 'easeInOutQuad',                 // easing method for complete transition
                            easeIn: 'easeInQuad',                    // easing method for first half of transition
                            easeOut: 'easeOutQuad',                   // easing method for second half of transition
                            closed: true,                           // start with the book "closed", will add empty pages to beginning and end of book
                            closedFrontTitle: null,                            // used with "closed", "menu" and "pageSelector", determines title of blank starting page
                            closedFrontChapter: null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page
                            closedBackTitle: null,                            // used with "closed", "menu" and "pageSelector", determines chapter name of blank ending page
                            closedBackChapter: null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank ending page
                            covers: false,                           // used with  "closed", makes first and last pages into covers, without page numbers (if enabled)
                            pagePadding: 10,                              // padding for each page wrapper
                            pageNumbers: true,                            // display page numbers on each page
                            hovers: true,                            // enables preview pageturn hover animation, shows a small preview of previous or next page on hover
                            overlays: true,                            // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
                            tabs: false,                           // adds tabs along the top of the pages
                            tabWidth: 60,                              // set the width of the tabs
                            tabHeight: 20,                              // set the height of the tabs
                            arrows: false,                           // adds arrows overlayed over the book edges
                            cursor: 'pointer',                       // cursor css setting for side bar areas
                            hash: false,                           // enables navigation using a hash string, ex: #/page/1 for page 1, will affect all booklets with 'hash' enabled
                            keyboard: true,                            // enables navigation with arrow keys (left: previous, right: next)
                            next: $bttn_next,                      // selector for element to use as click trigger for next page
                            prev: $bttn_prev,                      // selector for element to use as click trigger for previous page
                            menu: null,                            // selector for element to use as the menu area, required for 'pageSelector'
                            pageSelector: false,                           // enables navigation with a dropdown menu of pages, requires 'menu'
                            chapterSelector: false,                           // enables navigation with a dropdown menu of chapters, determined by the "rel" attribute, requires 'menu'
                            shadows: true,                            // display shadows on page animations
                            shadowTopFwdWidth: 166,                             // shadow width for top forward anim
                            shadowTopBackWidth: 166,                             // shadow width for top back anim
                            shadowBtmWidth: 50,                              // shadow width for bottom shadow
                            before: function () { },                    // callback invoked before each page turn animation
                            after: function () { }                     // callback invoked after each page turn animation
                        });
                        Cufon.refresh();

                    }
                }).attr('src', source);
            });
        });

    </script>

</body>

</html>
    评论

报告相同问题？

  • JavaScript实现书本翻页效果：从原理到实践
    2025-09-03 13:26
    前端人类学的博客 Hi，我是前端人类学！在数字阅读体验中，逼真的书本翻页效果能够显著提升用户的沉浸感和愉悦度。本文将深入探讨如何使用JavaScript实现一个流畅而逼真的书本翻页效果。
  • 多功能电子相册翻书页效果特效HTML+css+js代码
    2022-03-09 15:55
    标题 "多功能电子相册翻书页效果特效HTML+css+js代码" 描述了一种用于网页设计的技术，这种技术能够实现模拟真实书籍翻页效果的动态电子相册。电子相册翻页特效使得用户在浏览网页上的照片集时，能够体验到如同翻阅...
  • JS+CSS3电子书翻页效果[可运行源码]
    2026-03-20 06:34
    构建一个逼真的电子书翻页效果是一个涉及前端技术的复杂过程。首先，需要对翻页效果进行物理建模和数学基础分析。物理建模关注的是如何在视觉上复现现实世界中书本翻页的物理特性，比如纸张的厚度、抗弯强度、摩擦力...
  • Html+css+js实现的炫酷效果，你知道几个呢？
    2022-06-04 19:34
    小小锋叔叔的博客 目录1.实现抽奖大转盘Html如下index.CSS如下index.js如下2.实现书本自动翻页效果Html如下 index.CSS如下 css2.css如下 style.css如下 image图片自取可以亲自试试哦
  • html+css+js 制作表白翻页相册
    2021-12-11 17:39
    静Yu的博客 html+css+js实现表白翻页相册，不一样的惊喜礼物。
  • javascript移动端 电子书 翻页效果实现代码
    2020-10-16 11:04
    综上所述，通过本文介绍的知识点，我们可以了解到，在移动端实现电子书翻页效果需要前端开发者对HTML结构、CSS样式、JavaScript编程以及第三方插件的合理运用。此外，还需考虑到代码的可维护性、用户交互体验以及...
  • HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
    2024-08-23 06:53
    CSDN专家-微编程的博客 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。...
  • CSS3实现书本自动翻页特效.rar
    2023-10-01 23:52
    【标题】"CSS3实现书本自动翻页特效.rar"是一个使用CSS3技术来创建书本翻页效果的代码资源。这种特效常用于模拟真实的图书阅读体验，为网页添加互动性和趣味性。CSS3是层叠样式表的第三版，引入了许多新的功能，如...
  • jQuery响应式翻页效果 jQuery响应式书本翻页效果网页特效.zip
    2022-11-22 17:15
    本篇文章将深入探讨如何利用jQuery创建响应式的书本翻页效果，同时结合CSS和HTML5，打造引人入胜的网页特效。 一、jQuery基础 jQuery简化了JavaScript的DOM操作，事件处理和动画效果。它的核心特性包括选择器、链式...
  • 前端实现图书翻页(支持正向和逆向翻页)效果(含代码和演示视频)
    2020-05-15 10:07
    本项目采用HTML、CSS和JavaScript技术在浏览器环境中实现了图书翻页效果，不仅支持正向翻页，还支持逆向翻页，充分考虑了用户的不同需求。此外，项目还集成了语言转换功能，这在多语言网站或应用中尤其有用。 首先...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 5月7日