javascript - 在另一个函数中向左/向右移动 div

Question

当图像像这样左右移动时，尝试左右移动“sliding_head”div:

这是我的 CSS、HTML 和 JS(包括我的尝试)。我的尝试不起作用，因为我将值设置在左/右函数之外，而当我将它设置在其中时，它就不起作用了。向左滑动时标题需要向左滑动 509px，向右滑动时返回到起始位置。我如何调整下面的 JS 以在插件函数中执行此操作？

        #second {
            position:absolute;
            left:1024px;
            width:2048px;
            height:768px;
            background-color: #f3f0ef;

        }

        .sliding_content {

        }

        .sliding_head {
            position: absolute;
            top: 119px;
            left: 140px;
        }

        .sliding_2 {
            position: absolute;
            left: 1024px;
        }

        .imgs img{
            float: left;
        }

HTML

<div id="second">
                    <img class="notes" src="img/2-top.jpg" />
                     <img src="img/2-top-2.jpg" />
                     <img src="img/2-middle.jpg" />
                        <div class="sliding_content">
                            <img class="sliding_head" src="img/2-sliding_head.png" /> <!-- this is the header image that needs to slide 509px left when swiping left and back to its start position when swiping right -->

                            <div class="galleryTouch">
                              <div class="imgs">
                                <img src="img/2-sliding_1.png">
                                <img src="img/2-sliding_2.png">
                              </div>
                            </div>
                        </div>
                </div>

为此尝试了 JS(我的评论内嵌在大写字母中)

$(function() {
        var IMG_WIDTH = 1024,
        currentImg=0,
        maxImages=2;
        speed=500,
        imgs = $(".imgs");
        head = $(".sliding_head"); //ADDED VAR FOR ADDED SLIDING DIV



        //Init touch swipe
        imgs.swipe( {
            triggerOnTouchEnd : true,
            swipeStatus : swipeStatus,
            allowPageScroll:"vertical"
        });


        /**
        * Catch each phase of the swipe.
        * move : we drag the div.
        * cancel : we animate back to where we were
        * end : we animate to the next image
        */
        function swipeStatus(event, phase, direction, distance, fingers)
        {
            //If we are moving before swipe, and we are going L or R, then manually drag the images
            if( phase=="move" && (direction=="left" || direction=="right") )
            {
                var duration=0;

                if (direction == "left") 
                    scrollImages((IMG_WIDTH * currentImg) + distance, duration);
                    //I'VE TRIED HERE
                else if (direction == "right")
                    scrollImages((IMG_WIDTH * currentImg) - distance, duration);
                    //AND HERE BUT IT STOPS WORKING
            }

            //Else, cancel means snap back to the begining
            else if ( phase == "cancel")
            {
                scrollImages(IMG_WIDTH * currentImg, speed);
            }

            //Else end means the swipe was completed, so move to the next image
            else if ( phase =="end" )
            {
                if (direction == "right")
                    previousImage();
                else if (direction == "left")
                    nextImage()
            }
        }

        function previousImage()
        {
            currentImg = Math.max(currentImg-1, 0);
            scrollImages( IMG_WIDTH * currentImg, speed);
        }

        function nextImage()
        {
            currentImg = Math.min(currentImg+1, maxImages-1);
            scrollImages( IMG_WIDTH * currentImg, speed);
        }

        /**
         * Manually update the position of the imgs on drag
         */
        function scrollImages(distance, duration)
        {
            imgs.css("-webkit-transition-duration", (duration/1000).toFixed(1) + "s");
            //inverse the number we set in the css
            var value = (distance<0 ? "" : "-") + Math.abs(distance).toString();
            imgs.css("-webkit-transform", "translate3d("+value +"px,0px,0px)");

            //ADDED THIS IN MY LATEST ATTEMPT, IT JUST SLIDES TO NEW POSITION BUT NOT BACK
            head.css("-webkit-transition-duration", (duration/500).toFixed(1) + "s"); //DO THIS ONE SLOWER
            //MAKE 'VALUE' AN INT (WILL BE -1024) AND SET IN NEW VAR PLUS 509 LEFT TO POSITION CORRECTLY
            var headval = parseInt(value)+509;
            head.css("-webkit-transform", "translate3d("+headval +"px,0px,0px)");

        }
    });

Answer 1

通过在 if (direction == "left") 和 if (direction == "right") 中设置我的移动来解决。