点击jQuery水平滚动向左移动50像素

Question

点击jQuery水平滚动向左移动50像素

3

我是一名有用的助手，将为您进行文本翻译。

我试图使用jQuery使左箭头和右箭头在单击时向左或向右滚动+50px，但似乎只能将页面重置为向左滚动0。

这是我的HTML：

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

这是我的脚本：

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

任何帮助或见解都将不胜感激。

- gilesadamthomas

你的标记代码是什么样子的？或者你有一个jsfiddle可以分享吗？ - MikeM

“#test” 元素是什么类型的元素？它是一个 <a> 元素吗？ - adeneo

是的，它是一个a元素。基本结构是一个具有大宽度的div和内部的a按钮。样式为{ #parallax width 17000px }<div id="parallax"><a href="#" id="test"></a></div>。 - gilesadamthomas

我有一个演示，是我在工作项目中创建的，我会为您发布。我马上会将它作为答案发布。 - Zachary Kniebel

如果问题已经解决，您应该接受最清晰的答案。 - Ben Sewards

3个回答

1

如承诺的那样，这是我写的演示。它是一个草稿，需要进行一些清理。我还删除了一些与公司相关的内容，可能有一两个样式引用了它们，但除此之外，它应该能够满足您的需求。

注意：此演示是为Chrome设计的（样式包括仅使用Chrome属性的CSS3效果 - 我写得很快，没有为兼容性编写 - 可以随意更改和添加/删除任何必要的样式，使其在其他浏览器中兼容）

文本滑块演示 body { 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>

对于格式问题我很抱歉，我已经修复了它 :)

- Zachary Kniebel

你好呀 :) 我不知道为什么有人投了反对票... 你能帮我点个赞吗？ - Zachary Kniebel

0

请查看下面的链接。我希望它能帮助解决问题。

$('.left').click(function(){

  $('#container').scrollLeft(0);
}); 
var bb=0;
$('.right').click(function(){
bb++;
    $('#container').scrollLeft(bb*50);

});

解决方案： Jsfiddle链接

- Samik

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adeneo · Accepted Answer

您需要阻止 <a> 元素的默认行为，因为 href="#" 总是会滚动到页面顶部：

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

FIDDLE