Vertical flipping using turn.js

问题

I am using turn.js in my application and would like to implement the vertical flipping similar to http://pageflip-books.com/documentation-configuration.php - VerticalMode

Can anyone let me know, how can I implement the vertical flipping in turn.js?

回答1:

Just rotate the continer div by 90 degrees, and then rotate internal childs by -90 degrees to cancel the rotation.

回答2:

Rotating the container by -90 degrees and the pictures by 90 degrees does produce a vertical flip-book, but the mouse event co-ordinates do not get flipped, so the animated flipping does not work as expected—you have to hover the mouse in unexpected places, and make mouse gestures in unexpected directions to make it work.

回答3:

1. rotate each page -90deg
2. rotate the whole book(calendar) 90deg
3. change mouse(touch) event coordinate from vertical page horizontal one

turn.js-coordinate translate method

      _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-coordinate translate usage

      _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>

来源：https://stackoverflow.com/questions/30867378/vertical-flipping-using-turn-js

标签

javascript

turnjs

page-flipping