左側水平滾動+ 50px點擊jQuery

我試圖用jQuery來左右箭頭左右滾動+ 50px，點擊時任何一種方式，但它似乎只是重置頁面向左滾動0 。左側水平滾動+ 50px點擊jQuery

這是我的HTML：

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

這是我的腳本：

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

任何幫助或洞察力將非常感激。

來源

2012-08-14 gilesadamthomas

你的標記是什麼樣子，或者你有一個[jsfiddle]（http://jsfiddle.net），你可以分享？ – MikeM 2012-08-14 19:06:37

'＃test'元素是什麼元素，它是一個''元素？ – adeneo 2012-08-14 19:07:01

是的，它是一個元素基本結構是一個具有很大的寬度和一個按鈕裏面的樣式風格{#parallax寬度17000px}

– gilesadamthomas 2012-08-14 19:09:12

您需要防止<a>元素的默認行爲，作爲href="#"將始終滾動到頂部：

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

FIDDLE

來源

2012-08-14 19:09:51 adeneo

你的權利adeneo，身體是滿溢的元素謝謝你，偉大的工程！還有一個問題，如果你有時間，你會如何+ 50px而不是50px？ – gilesadamthomas 2012-08-14 19:15:16

@gilesadamthomas - 正在測試它，是的，身體似乎是滾動條的元素。 – adeneo 2012-08-14 19:16:35

請問您會如何+ 50px而不是50px？ – gilesadamthomas 2012-08-14 19:42:15

正如所承諾的，這裏是我寫的演示。這是一個粗略的草案，可以使用一些清潔。我也刪除了一些與公司有關的東西，可能有一兩種引用它們的樣式，但除此之外它應該做你想要的。

注意：這個演示是爲Chrome設計的（樣式包括CSS3特效，只有chrome屬性 - 我寫得很快，並沒有爲兼容性寫 - 它可以隨意更改和刪除/添加任何必要的樣式以使其兼容在其他瀏覽器）

文本滑塊演示體{ 背景色：RGB（252252252）; }

.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-14 19:16:32

哇謝謝多數民衆贊成 – gilesadamthomas 2012-08-14 19:20:17

您的歡迎:)我不知道爲什麼有人投票下來雖然...可以你請爲我投票支持嗎？ – 2012-08-14 19:20:51

左側水平滾動+ 50px點擊jQuery

回答

相關問題