Question

我在我的应用程序中使用turn.js并希望实现类似于http://pageflip-books.com/documentation-configuration.php的垂直翻转 - VerticalMode

任何人都可以告诉我，我怎样才能实现纵向翻转？js？

Answer 1

将控制器div旋转90度，然后将内部子项旋转-90度以取消旋转。

Answer 2

将容器旋转-90度并将图片旋转90度确实产生了一个垂直的翻书，但是鼠标事件坐标不会被翻转，因此动画翻转不起作用正如预期的那样 - 你必须将鼠标悬停在意想不到的位置，并在意想不到的方向上做出鼠标手势才能使其正常工作。

Answer 3

1。将每页旋转-90度
2。将整本书（日历）旋转90度
3。从垂直页面水平方向更改鼠标（触摸）事件坐标

turn.js坐标转换方法

      _translateCoordinate: function(e) {
            if (!e) {
                return e;
            }
            var data = this.data().f;
            var pos = data.parent.offset();
            var oldX = e.pageX - pos.left;
            var oldY = e.pageY - pos.top;

            var newX = oldY + pos.left;
            var newY = this.height() - oldX + pos.top;

            return {
                pageX: newX,
                pageY: newY
            };
        },

turn.js坐标翻译用法

      _eventMove: function(e) {
            var data = this.data().f;

            if (!data.disabled) {
                e = (isTouch) ? e.originalEvent.touches : [e];

                if (data.corner) {
                    var pos = data.parent.offset();
                    var posInNewCoordinate = 
                    flipMethods._translateCoordinate.call(this, e[0]); // here

                    data.corner.x = posInNewCoordinate.pageX - pos.left;
                    data.corner.y = posInNewCoordinate.pageY - pos.top;

 _cornerActivated: function(e) {
            if (e.originalEvent === undefined) {
                return false;
            }

            e = (isTouch) ? e.originalEvent.touches : [e];

            var posInNewCoordinate = 
                flipMethods._translateCoordinate.call(this, e[0]); // here
            var data = this.data().f,
                pos = data.parent.offset(),
                width = this.width(),
                height = this.height(),
                c = {
                    x: Math.max(0, posInNewCoordinate.pageX - pos.left),
                    y: Math.max(0, posInNewCoordinate.pageY - pos.top)
                },

的HTML

<!doctype html>
<html>

<head>
    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript" src="turn.js"></script>

    <style type="text/css">
        #calendar,
        .calendar-wrapper {
            transform-origin: 0% 0% 0px;
        }

        #calendar .turn-page {
            background-image: url('paper-texture.png');
            background-repeat: repeat;
        }

        .page-wrapper>.page {
            height: 800px;
            width: 600px;
            transform-origin: 0% 0% 0px;
        }
    </style>
</head>

<body>
    <div>
        <div class="calendar-wrapper">
            <div id="calendar">
                <div class="page-wrapper">
                    <div class="page" style="background-image:url(pages/01.jpg);"></div>
                </div>
                <div class="page-wrapper">
                    <div class="page" style="background-image:url(pages/02.jpg);"></div>
                </div>
                <div class="page-wrapper">
                    <div class="page" style="background-image:url(pages/03.jpg);"></div>
                </div>
                <div class="page-wrapper">
                    <div class="page" style="background-image:url(pages/04.jpg);"></div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(window).ready(function() {
            var $page = $('.page-wrapper>.page');
            var $calendarWrapper = $('.calendar-wrapper');
            var $pageWrapper = $('.page-wrapper');
            var $calendar = $('#calendar');

            var height = $page.height();
            var width = $page.width();

            $page.css('transform', `translate3d(0px, ${width}px, 0px) rotate(-90deg)`);

            $calendarWrapper.height(width);
            $calendarWrapper.width(height);
            $calendarWrapper.css('transform', `translate3d(${width}px, 0px, 0px) rotate(90deg)`)

            $pageWrapper.height(width);
            $pageWrapper.width(height);

            $calendar.height(width);
            $calendar.width(height);

            $calendar.turn({
                display: 'single',
                acceleration: true,
                gradients: false,
                gradients: !$.isTouch,
                elevation: 50,
                when: {
                    turned: function(e, page) {
                        /*console.log('Current view: ', $(this).turn('view'));*/
                    }
                }
            });
        });
    </script>
</body>

</html>

使用turn.js进行垂直翻转

3 个答案:

turn.js坐标转换方法

turn.js坐标翻译用法