5

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

谁能告诉我，如何在 turn.js 中实现垂直翻转？

4

3 回答 3

0

将容器旋转 -90 度并将图片旋转 90 度确实会生成垂直翻书，但鼠标事件坐标不会翻转，因此动画翻转无法按预期工作 - 您必须将鼠标悬停在意想不到的地方，并在意想不到的方向上做出鼠标手势以使其工作。

于 2017-08-20T19:12:44.847 回答
0

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>
于 2018-08-21T07:51:44.040 回答
0

只需将 continer div 旋转 90 度，然后将内部子级旋转 -90 度即可取消旋转。

于 2017-07-19T05:46:24.640 回答