All Components

Effects / Page Turn

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Page Turn</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div id="wrap" class="first-page"> 
    <ul id="book"> 
     <li><img src="../content/web/fx/pageturn/maserati.jpg" alt="Page 6"></li> 
     <li><img src="../content/web/fx/pageturn/mazda.jpg" alt="Page 5"></li> 
     <li><img src="../content/web/fx/pageturn/mercedes.jpg" alt="Page 4"></li> 
     <li><img src="../content/web/fx/pageturn/audi.jpg" alt="Page 3"></li> 
     <li><img src="../content/web/fx/pageturn/ferrari.jpg" alt="Page 2"></li> 
     <li class="current"><img src="../content/web/fx/pageturn/mini.jpg" alt="Page 1"></li> 
    </ul> 
    <a href="#" id="previous">Previous page</a> 
    <a href="#" id="next">Next page</a> 
   </div> 
   <script>
        function current(page) {
            var book = $("#book"),
                pages = book.children(),
                pagesCount = pages.length,
                current = pages.filter(".current"),
                currentIndex = pagesCount - current.index(),
                newPage;

            if (!arguments.length) {
                return currentIndex;
            }

            if (book.data("animating")) {
                return;
            }

            $("#wrap").toggleClass("first-page", page == 1)
                      .toggleClass("last-page", page == pagesCount);

            if (page != currentIndex) {
                current.removeClass("current");
                newPage = pages.eq(pagesCount - page).addClass("current");

                if (page > currentIndex) {
                    kendo.fx(book).pageturnHorizontal(current, newPage).play();
                } else {
                    kendo.fx(book).pageturnHorizontal(newPage, current).reverse();
                }
            }
        }

        $("#previous").click(function(e) {
            e.preventDefault();
            current(Math.max(1, current() - 1));
        });

        $("#next").click(function(e) {
            e.preventDefault();
            current(Math.min(6, current() + 1));
        });
    </script> 
   <style>
        #wrap {
            background-image: url("../content/web/fx/pageturn/book.png");
            width: 657px;
            height: 482px;
            margin: 2.5em auto 4em;
            position: relative;
        }

        #book {
            position: relative;
            width: 650px;
            height: 477px;
            margin: 0 auto;
            padding: 0;
            list-style-type: none;
        }

        #book > li {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #fff;
        }

        #actions {
            overflow: hidden;
            margin: 0 auto 3em;
            width: 650px;
        }

        #previous, #next {
            text-decoration: none;
            text-indent: -999em;
            overflow: hidden;
            display: block;
            height: 100%;
            width: 90px;
            position: absolute;
            top: 0;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            opacity: .5
        }

        #previous:hover, #next:hover {
            opacity: 1;
        }

        #previous {
            left: 0;
            background-image: url("../content/web/fx/pageturn/arrow-left.png");
        }

        #next {
            right: 0;
            background-image: url("../content/web/fx/pageturn/arrow-right.png");
        }

        .first-page #previous,
        .last-page #next {
            display: none;
        }
    </style> 
  </div>   
 </body>
</html>