在按鈕懸停上向左或向右滾動圖像

我是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/

來源

2014-01-17 user2750762

還有就是marquee標籤，你可以用它來滾動文本左，右：

例子：

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

來源

2014-01-17 10:47:49 Stefan

我不能使用字幕標記它應該在jQuery中 – user2750762

在按鈕懸停上向左或向右滾動圖像

回答

相關問題