左侧水平滚动+ 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

回答

相关问题