Question

我是jQuery的新手。我在stackoverflow上找到了这个代码，这对于在鼠标悬停时上下滚动内容工作正常，但我希望这个内容在鼠标上左右滚动。

<!DOCTYPE html>
<html>
<head>

<title>Scroll up</title>
<style>
#content {
    overflow:auto;
    width: 178px;
height: 21px;
border:1px solid #000000;
}

</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
var step = 25;
var scrolling = false;

// Wire up events for the 'scrollUp' link:
$("#scrollUp").bind("click", function(event) {
    event.preventDefault();
    // Animates the scrollTop property by the specified
    // step.
    $("#content").animate({
        scrollTop: "-=" + step + "px"
    });
}).bind("mouseover", function(event) {
    scrolling = true;
    scrollContent("up");
}).bind("mouseout", function(event) {
    scrolling = false;
});


$("#scrollDown").bind("click", function(event) {
    event.preventDefault();
    $("#content").animate({
        scrollTop: "+=" + step + "px"
    });
}).bind("mouseover", function(event) {
    scrolling = true;
    scrollContent("down");
}).bind("mouseout", function(event) {
    scrolling = false;
});

function scrollContent(direction) {
    var amount = (direction === "up" ? "-=1px" : "+=1px");
    $("#content").animate({
        scrollTop: amount
    }, 1, function() {
        if (scrolling) {
            scrollContent(direction);
        }
    });
}
});
</script>


</head>
<body>
    <a id="scrollDown" href="#">up</a>
   <a id="scrollUp" href="#">down</a>

<div id="wrapper">
    <div id="content">

        <ul>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>            
        </ul>

    </div>
</div>

</body>
</html>

jsfiddle链接：http://jsfiddle.net/andrewwhitaker/s5mgX/

Answer 1

有marquee标记，可用于向左和向右滚动文字：

示例：

<marquee behavior="scroll" direction="left">Here is some scrolling text... right to left!</marquee>

按钮悬停时向左或向右滚动图像

1 个答案: