精华内容
下载资源
问答
  • js 翻页效果

    2012-12-28 16:42:42
    js 翻页效果
  • 本文主要介绍JavaScript中利用transform实现数字翻页效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
  • 一个JS翻页效果

    2020-10-30 18:22:53
    一个JS翻页效果
  • js翻页
  • Js 翻页效果

    2014-11-26 13:00:55
    js 翻书效果 兼容ie8,ffm以上的浏览器
  • 主要介绍了javaScript+turn.js实现图书翻页效果实例代码,重点讲解turn.js 如何使用的。需要的朋友可以参考下
  • js翻页效果实现

    万次阅读 2017-10-24 13:31:48
    1)功能:实现书籍翻页效果 2)使用插件:turn.js2、示例 1)前提工作 – 需要提前计算数据总页数,提前生成需要的页数 – 初始化翻书插件 2)实践 html代码片段示例:<!DOCTYPE html> 翻书</title>

    1、说明
    1)功能:实现书籍翻页效果
    2)使用插件:turn.js

    2、示例
    1)前提工作
    – 需要提前计算数据总页数,提前生成需要的页数
    – 初始化翻书插件
    2)实践
    html代码片段示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>翻书</title>
        <meta name="description" content="翻书">
        <meta name="keywords" content="翻书">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
       <!--  <link rel="stylesheet" href="common.css"> -->
        <style>
            .btn {
              background: none;
              border: none;
              line-height: normal;
              cursor: pointer;
              outline: none;
              font-family: "Microsoft Yahei"; }
            #magazine .turn-page{
                background-color:#ccc;
                background-size:100% 100%;
            }
            main{
                overflow: hidden;
                background: url("img/bg2.png") no-repeat;
                -webkit-justify-content: space-between;
                background-size: cover;
            }
            .pagination {
                display: -webkit-flex;
                -webkit-justify-content: space-between;
                -webkit-align-items: center;
                margin-top: 5%;
                padding: 0 5%; }
            .pagination .btn {
                padding: 5px 10px;
                color:#000;
                font-size: 14px; }
        </style>
    </head>
    <body>
        <div class="book">
            <div class="main">
                <div id="magazine">
                    <div style="background-image:url(img/book3.png);">
                        <p style="font-size:30px;margin: 150px;">首页</p>
                    </div>
    
                </div>
            </div>
            <div class="pagination" id="pagebut">
                <button class="btn prev" style="visibility:hidden">上一页</button>
                <button class="btn next">下一页</button>
            </div>
            <div class="pagination" id="gobackbtn" style="display: none;">
    
            </div>
        </div>
        <input type="hidden" value="7" id="page_nums" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="js/turn.min.js"></script>
        <script src="js/js.js"></script>
    </body>
    </html>

    js代码片段

    $(function(){
        //------------- 翻书init start ------------
        //  book 初始化
        $('#magazine').turn({
            pages: $('#page_nums').val(),//总页数
            display: 'single',
            acceleration: true,
            gradients: !$.isTouch,
            width:  $(window).width()*0.9,
            height: $(window).height()*0.834,
            elevation:50,/*
                turnCorners: "bl,br",*/
            when: {
                turning: function(e, page, view) {
                    $("#magazine").turn("disable");
                    // Gets the range of pages that the book needs right now
                    var range = $(this).turn('range', page);
                    // Check if each page is within the book
                    for (page = range[0]; page<=range[1]; page++)
                        addPage(page, $(this));
                },
                turned: function(e, page) {
                    $('#page-number').val(page);
                    if(page==1){
                        $('.prev').css('visibility','hidden');
                    }
                    if(page >= 2){
                        var page = $("#magazine").turn('page');
                        //显示 上一页按钮显示
                        $('.prev').css('visibility','visible');
                        $('.next').css('visibility','visible');
                    }
                    if(page == $("#magazine").turn('pages')-1){
                        //最后一页 下一页按钮消失
                        $('.next').css('visibility','hidden');
                    }
                }
            }
        });
    
        //  上下翻页
        $('.next').on("click",function () {
            $('#magazine').turn("next");
            var page = $("#magazine").turn('page');
            if(page == 2){
                //显示 上一页按钮显示
                $('.prev').css('visibility','visible')
            } else if(page == $("#magazine").turn('pages')-1){
                //最后一页 下一页按钮消失
                $('.next').css('visibility','hidden')
            }
        });
        $('.prev').on("click",function () {
            $('#magazine').turn("previous");
            var page = $("#magazine").turn('page');
            if(page == 1){
                //首页上一页 按钮消失
                $('.prev').css('visibility','hidden')
            } else if(page == $("#magazine").turn('pages')-2){
                //倒数第二页 显示 下一页 按钮
                $('.next').css('visibility','visible')
            }
        });
        //------------- 翻书init end --------------
    });
    
    // Adds the pages that the book will need
    function addPage(page, book)
    {
        var pages =$('#page_nums').val();//总页数
        //  First check if the page is already in the book
        if (!book.turn('hasPage', page)) {
            // Create an element for this page
            var element = $('<div />', {'class': 'page '+((page%2==0) ? 'odd' : 'even'), 'id': 'page-'+page}).html('<i class="loader"></i>');
            // If not then add the page
            book.turn('addPage', element, page);
            // Let's assum that the data is comming from the server and the request takes 1s.
            setTimeout(function(){
                var sHtml = '<div class="data" style="margin:100px;"><p>Data for page '+page+'</p><a href="javascript:void(0)" onclick="showDetail()">点击进入详情页</a></div>';
                element.html(sHtml);
            }, 1000);
        }
    }
    
    //detail page
    function showDetail()
    {
        //详情页数据
        var sHtml = '<div class="data" style="margin:80px;">welcome to detail page *^_^* </div>';
        //获取 当前页 页码
        var currentPage = $("#magazine").turn('page');
        //获取 最后一页 页码,作为详情页
        var iDetailIndex = $("#magazine").turn('pages');
        iDetailIndex = parseInt(iDetailIndex);
        //分类标签按钮展示处理
        $('#pagebut').hide();
        $("#gobackbtn").html('<button class="btn"></button><button class="btn" onclick="gobacklist(' + currentPage + ');">返回</button>');
        $('#gobackbtn').show();
        //新增并跳转到详情页
        $('#magazine').turn("addPage", sHtml, iDetailIndex);
        $('#magazine').turn("page", iDetailIndex);
    }
    
    //详情页返回列表页
    function gobacklist(listPage)
    {
        //返回list
        $('#magazine').turn('page', listPage);
        //处理按钮展示
        if ($('#pagebut').css('display', 'none')) {
            $("#gobackbtn").html('');
            $('#gobackbtn').hide();
            $('#pagebut').show();
        }
    }
    

    3、效果
    最终效果如图
    这里写图片描述

    注:
    1)jquery插件库:http://www.jq22.com/
    2)使用插件(turn.js)官网说明:http://www.turnjs.com/docs/Main_Page
    3)插件示例代码:http://www.jq22.com/jquery-info2534

    展开全文
  • JS翻页效果

    2013-10-10 12:17:17
    js实现电子书翻页效果,可在MyEclipse上直接运行。直接放在WebRoot文件夹下。
  • js 翻页效果 源码

    2009-01-13 18:35:54
    js 翻页效果 源码js 翻页效果 源码js 翻页效果 源码
  • js翻页效果

    2019-06-19 16:15:16
    showTurnPage(block){ //block.getComponent(cc.Sprite).spriteFrame = normal 切换背面图片 var action1 = cc.rotateBy(1,0,90)//翻到中间 var callFunc= cc.callFunc(()=>{ //此时应该切换正面图片 ...

    showTurnPage(block){

    //block.getComponent(cc.Sprite).spriteFrame = normal 切换背面图片

    var action1 = cc.rotateBy(1,0,90)//翻到中间

    var callFunc = cc.callFunc(()=>{

          //此时应该切换正面图片

    })

    var action2 = cc.rotateBy(1,0,90)//完全翻到正面

    block.runAction(cc.sequence(action1,callFunc,action2))

    },

    展开全文
  • 不错的js翻页效果

    2012-08-07 10:39:44
    js写的翻页效果很炫,(上一页,下一页)
  • 当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的。在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 “mousewheel” 事件,而 Firefox ...
  • 主要介绍了JS实现的3D拖拽翻页效果,通过鼠标事件结合时间函数动态操作页面元素实现拖拽翻页的效果,需要的朋友可以参考下
  • js实现web的翻页功能

    2017-04-26 18:16:06
    js实现web前端的翻页,实现、首页、尾页、上一页、下一页的功能实现
  • JS实现图片翻页效果

    2009-02-27 13:46:15
    JS在不改变原图的情况下呈现图片翻页的视觉效果
  • 主要介绍了JavaScript实现翻页功能(附效果图),在项目需求中经常遇到,今天小编抽时间给大家分享JavaScript实现翻页功能实例代码,需要的朋友参考下吧
  • 漂亮的计数器翻页效果,纯JS代码
  • 看了好多网上的所谓的图片翻页,一点也没有书的翻页效果,自己在网上找了一个页面改了一下,成功了和大家分享一下...imageBook javascript翻页效果 图片翻页效果 js翻页 js图片翻页 imageBook javascript翻页效果示例
  • 不错的Javascript表格翻页效果
  • 最后是js部分的代码: document.addEventListener('DOMContentLoaded',function(){ var oBox = document.getElementById('box'); var oPage = document.querySelector('.page'); var oPage2 = document....

    css样式是酱紫的:

    *{margin:0; padding:0}
    body,html{
        /*防止抖动*/
        overflow: hidden;
    }
    #box{ 
       width:700px;
        height:400px;
        background: url("img/0.jpg")
        no-repeat;
        margin:100px auto;
        position:relative;
    }
    #box .page{
        /*在box的右半部分*/
        width: 50%;
        height: 100%;
        top:0;
        right:0;
        position: absolute;
        /*开启3d模式*/
        transform-style: preserve-3d; 
       /*设定旋转中心*/
        transform-origin: left center;
        transition:1s all ease; 
       z-index:2; 
       /*初始化*/ 
       transform:perspective(800px) rotateY(0deg);
    }
    #box .page div{
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
    }
    #box .page .front{
        /*显示图片的右半部分*/
        background: url("img/0.jpg") right top no-repeat;
        /*不显示背面*/
        backface-visibility: hidden; 
       /*层级比背面高*/ 
       z-index:2;
    }
    #box .page .back{
        background:url("img/1.jpg") left top no-repeat;
        z-index: 1;
       transform: scale(-1,1);
    }
    #box .page2{
        width:50%;
        height:100%;
        position:absolute;
        right:0;
        top:0;
        background: url("img/1.jpg") right top no-repeat;
        z-index:1;
    }
    
    这里面有几个比较重要的css3知识点:

    1、transform-style:preserve-3d;开启3d模式,这样才真正的是3d效果,后面的
    backface-visibility: hidden;
    z-index:2;才会有三维效果
    transform-style:flat; 默认是平面

    2、 backface-visibility: hidden; 是背面不可见
    backface-visibility: visible; 是背面可见

    3、transform: scale(-1,1); 水平翻转
    scale(x,y)定义 2D 缩放转换。
    scale3d(x,y,z)定义 3D 缩放转换。
    scaleX(x)通过设置 X 轴的值来定义缩放转换。
    scaleY(y)通过设置 Y 轴的值来定义缩放转换。
    scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
    rotate(angle)定义 2D 旋转,在参数中规定角度。

    4、 transform-origin: left center;
    transform-origin: x-axis y-axis z-axis;
    x-axis:定义视图被置于 X 轴的何处。可能的值:
    left
    center
    right
    length
    %
    y-axis:定义视图被置于 Y 轴的何处。可能的值:
    top
    center
    bottom
    length
    %
    z-axis:定义视图被置于 Z 轴的何处。可能的值:
    length

    5、transform:perspective
    perspective: number|none;
    number:元素距离视图的距离,以像素计。
    none 默认值。与 0 相同。不设置透视。
    transform:rotate
    rotate(angle)
    定义 2D 旋转,在参数中规定角度。

    rotate3d(x,y,z,angle)
    定义 3D 旋转。

    rotateX(angle)
    定义沿着 X 轴的 3D 旋转。

    rotateY(angle)
    定义沿着 Y 轴的 3D 旋转。

    rotateZ(angle)
    定义沿着 Z 轴的 3D 旋转。

    接下来是简单的布局:

    <div id="box">
        <div class="page">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="page2"></div>
    </div>
    

    最后是js部分的代码:

    document.addEventListener('DOMContentLoaded',function(){
        var oBox = document.getElementById('box');
        var oPage  = document.querySelector('.page');
        var oPage2  = document.querySelector('.page2');
        var oFront  = document.querySelector('.front');
        var oBack  = document.querySelector('.back');
        var iNow = 0;
        var bReady = true;
        oBox.onclick = function(){
            if(bReady==false) {
                return;
            }
            bReady = false;
            iNow++;
            oPage.style.transition = '1s all ease';
            oPage.style.WebkitTransform = 'perspective(800px) rotateY(-180deg)';    
    };
        oPage.addEventListener('transitionend',function(){
            //1.瞬间拉回
            oPage.style.transition = 'none';
            oPage.style.WebkitTransform = 'perspective(800px) rotateY(0deg)';
            //2.换图
            oBox.style.background = 'url("img/'+(iNow%3)+'.jpg") no-repeat';
            oFront.style.background = 'url("img/'+(iNow%3)+'.jpg") right top no-repeat';
           oBack.style.background = 'url("img/'+((iNow+1)%3)+'.jpg") left top no-repeat';
            oPage2.style.background = 'url("img/'+((iNow+1)%3)+'.jpg") right top no-repeat';
            bReady = true;
        },false);
    },false);
    

    这就是结果啦。效果就像是翻书一样:
    给个图:

    3872133-f8dffb8add25df1f.png
    Paste_Image.png
    展开全文
  • 时钟翻页效果与计数翻页效果。通过countdown翻页效果改的计数翻页效果
  • 相册翻页效果div+css+jquery特效 可以改造加入到自己的代码。 整个文件很简洁易懂。效果很明显,独家研究!免费分享,只为您的5星,谢谢支持,这样我会更有动力分享更多更好的代码!
  • 拖动翻页代码,很多人都想拥有这样一个功能,现在于JavaScript配合CSS终于实现了,个人感觉真的很不错,按住鼠标左键向某一方向拖动即可完成分页动作,符合WEB标准,兼容多浏览器。
  • turn.js翻页效果)总结

    千次阅读 2019-07-29 10:19:07
    Turn.js是一个内置的jQuery翻页插件 1 html中引入<script type="text/javascript" src="js/turn.js"></script> 2 创建html <div id="flipbook"> <div class="hard"> Turn.js </div&...

    Turn.js是一个内置的jQuery翻页插件

    1 html中引入<script type="text/javascript" src="js/turn.js"></script>

    2  创建html

    <div id="flipbook">
      <div class="hard"> Turn.js </div> 
      <div class="hard"></div>
      <div> Page 1 </div>
      <div> Page 2 </div>
      <div> Page 3 </div>
      <div> Page 4 </div>
      <div class="hard"></div>
      <div class="hard"></div>
    </div>

    3 javascript 部分

    $("#flipbook").turn({
      width: 400,
      height: 300,
      autoCenter: true
    });

    4.可用选项、属性、方法、事件、css类

     选项:

    (1)acceleration:设置硬件加速模式,对于触摸设备,此值必须为真。
       acceleration:true;
    (2)direction:指定flipbook从左到右(DIR=ltr,默认值)或右向左(DIR=rtl)的方向。
      a.$
    展开全文
  • 用turn.js实现PC端的一系列图片形成书本翻页效果
  • JS实现的多种翻页效果,有多个实例,对于用JS来翻页的朋友是不错的学习素材

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,261
精华内容 4,904
关键字:

js翻页效果