3

jQueryを使用して、左矢印と右矢印をクリックしたときに左右に+50pxずつスクロールしようとしていますが、ページをリセットして左0にスクロールするようです。

これは私のHTMLです：

<div id="parallax">
    <a href="#" id="test"></a>
</div>

これは私のスクリプトです：

$(document).ready(function(){
    $("#test").click(function(){
        $("#parallax").scrollLeft(5000);
    });
});

どんな助けや洞察も本当に感謝しています。

4

3 に答える 3

2

は常に上にスクロールするため、<a>要素のデフォルト アクションを防止する必要があります。href="#"

$(document).ready(function(){
    $("#test").click(function(e){
        e.preventDefault();
        $('body').scrollLeft(5000);
    });
});​

フィドル

于 2012-08-14T19:09:51.223 に答える
1

約束どおり、これが私が書いたデモです。それは大まかなドラフトであり、いくつかのクリーニングを使用できました。また、会社関連のものをいくつか削除しました。それらを参照するスタイルが 1 つか 2 つあるかもしれませんが、それ以外は希望どおりに動作するはずです。

注: このデモは Chrome 用に設計されています (スタイルには、Chrome プロパティのみを持つ CSS3 効果が含まれています - 私はこれを急いで書いたので、互換性のために書いたわけではありません - 他のブラウザで互換性を持たせるために、必要なスタイルを自由に変更および削除/追加してください)

テキスト スライダー デモ本体 { background-color: rgb(252,252,252); }

    .demo {
        font-size: 16px;
        border: 2px solid rgb(200,200,200);
        display: inline-block;
        padding: 15px;
        border-radius: 10px;
        margin: 0px 0px 20px 30px;
    }

    .demo-inner-wrapper {
        width: 200px;
        overflow: hidden;
        border-radius: 5px;
    }

    .demo-outer-wrapper {
        border: 2px solid rgb(200,200,200);
        border-radius: 5px;
        padding: 4px;
        width: 200px;
        overflow: hidden;
        margin: 4px;
    }

    .demo-entry-title {
        white-space: nowrap;
    }

    .arrow {
        display: inline-block;
        margin: 4px;
        border-radius: 5px;
        border: 2px solid rgb(55,190,235);
        background-color: rgb(240,240,240);
        padding: 4px;
        width: 40px;
        text-align: center;
        color: rgb(30,180,230);
        font-weight: bold;
        cursor: pointer;
    }

    .demo-hover {
        background-color: rgb(0,35,100);
        color: rgb(252,252,252);
    }

    .content {
        padding: 8px;
        width: 640px;
        border: 2px solid rgb(200,200,200);
        border-radius: 10px;
    }

    .demo-information {
        font: 16px arial, helvetica, sans-serif;
    }

    .header {
        font-size: 24px;
        font-weight: bold;
        color: rgb(0,35,100);
    }

    .section-header {
        color: rgb(25,100,190);
        font-size: 18px;
        font-weight: bold;
        margin-left: 4px;
    }

    .demo-information p {
        margin-left: 4px;
    }

    .demo-header {
        font: 18px arial, helvetica, sans-serif;
        font-weight: bold;
        color: rgb(0,35,100);
    }  

    .demo-content {
        margin-left: 8px;
        margin-top: 8px;   
    }      
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var $left = $(".left-arrow");
        var $right = $(".right-arrow");
        var $et = $(".demo-entry-title");
        var $demoWrap = $(".demo-inner-wrapper");

        $left.mouseenter(function () {
            $(this).addClass("demo-hover");
            var width = $et.width();
            var marginStr = $et.css("margin-left");
            var margin = parseInt(marginStr.substring(0, marginStr.length - 2));
            console.log(margin, marginStr);
            var scrollTo = $demoWrap.width() - width;
            if (scrollTo < 0) {
                $et.animate({ "margin-left": scrollTo }, (margin - scrollTo) * 10);
                console.log(width, margin, scrollTo, (margin - scrollTo) * 10);
            }
        }).mouseleave(function () {
            $et.stop();
            $(this).removeClass("demo-hover");
        });

        $right.mouseenter(function () {
            $(this).addClass("demo-hover");
            var width = $et.width();
            var marginStr = $et.css("margin-left");
            var margin = parseInt(marginStr.substring(0, marginStr.length - 2));
            console.log(margin, marginStr);
            var scrollTo = $demoWrap.width() - width;
            if (scrollTo < 0) {
                $et.animate({ "margin-left": 0 }, -margin * 10);
                console.log(width, margin, scrollTo, -margin * 10);
            }
        }).mouseleave(function () {
            $et.stop();
            $(this).removeClass("demo-hover");
        });
    });
</script>
</head>
<body>
    <div class="content">
        <div class="demo-information">
            <div class="header">
                Text Slide Demo</div>
            <br />
            <div class="section-header">
                Overview</div>
            <p>
                The demo below is intended to illustrate the use of jQuery and CSS to create a slide
                effect text that is too long for its specified width, rather than wrapping the text
                onto multiple lines. The scripting involved is very light weight, and can easily
                be wrapped up into a jQuery plugin.
            </p>
        </div>
        <br />
        <div class="demo">
            <div class="demo-header">
                Demo:</div>
            <div class="demo-content">
                <div class="demo-outer-wrapper">
                    <div class="demo-inner-wrapper">
                        <span class="demo-entry-title">This is an entry title that is too long for the section,
                            and here is me giving it even more length.</span>
                    </div>
                </div>
                <div class="demo-buttons">
                    <span class="arrow left-arrow">Left</span><span class="arrow right-arrow">Right</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

フォーマットの問題で申し訳ありません。私はちょうどそれを修正しました:)

于 2012-08-14T19:16:32.283 に答える