Javascript 使用jquery动画使滚动条滚动的最简单方法_Javascript_Jquery

Javascript 使用jquery动画使滚动条滚动的最简单方法

javascript jquery

Javascript 使用jquery动画使滚动条滚动的最简单方法,javascript,jquery,Javascript,Jquery,我想制作一个div滚动条来滚动内容和动画。可以在几行代码中使用jquery吗下面是html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m

我想制作一个div滚动条来滚动内容和动画。可以在几行代码中使用jquery吗

下面是html代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

<script language="javascript">
$(".motorcycles-wrapper").animate({scroll: '+=50'}, 1000, 'easeOutQuad');


</script>
</head>
<style>
.motorcycles-wrapper {
    height:170px;
    background-color:#000;
    width:200px;
    overflow:scroll;
    overflow-y:hidden;
}
</style>
<body>
<div class="views-field views-field-view motorcycles-wrapper">        <div class="field-content motorcycles-field"><div class="view view-ye-slide-show view-id-ye_slide_show view-display-id-block view-of-motorcycle view-dom-id-7f69086a9234de4a24878c146bdc52ac">



      <div class="view-content">
      <table class="views-view-grid cols-4">
  <tbody>
          <tr class="row-1 row-first row-last">
                  <td class="col-1 col-first">

  <div class="views-field views-field-title">        <span class="field-content"><a href="/mysite/node/47">Falcone</a></span>  </div>  
  <div class="views-field views-field-uc-product-image">        <div class="field-content"><a href="/mysite/node/47"><img typeof="foaf:Image" src="http://localhost/mysite/sites/default/files/styles/thumbnail/public/45c857_df2173694b2e1cc56e443a4103f02ede.jpg" width="100" height="100" alt=""></a></div>  </div>          </td>
                  <td class="col-2">

  <div class="views-field views-field-title">        <span class="field-content"><a href="/mysite/node/45">V7 Special</a></span>  </div>  
  <div class="views-field views-field-uc-product-image">        <div class="field-content"><a href="/mysite/node/45"><img typeof="foaf:Image" src="http://localhost/mysite/sites/default/files/styles/thumbnail/public/45c857_57fbe09be65ba8c265ee621184267e45.jpg" width="100" height="100" alt=""></a></div>  </div>          </td>
                  <td class="col-3"> <div class="views-field views-field-title">        <span class="field-content"><a href="/mysite/node/45">V7 Special</a></span>  </div>  
  <div class="views-field views-field-uc-product-image">        <div class="field-content"><a href="/mysite/node/45"><img typeof="foaf:Image" src="http://localhost/mysite/sites/default/files/styles/thumbnail/public/45c857_57fbe09be65ba8c265ee621184267e45.jpg" width="100" height="100" alt=""></a></div>  </div> 
                      </td>
                  <td class="col-4 col-last"> <div class="views-field views-field-title">        <span class="field-content"><a href="/mysite/node/45">V7 Special</a></span>  </div>  
  <div class="views-field views-field-uc-product-image">        <div class="field-content"><a href="/mysite/node/45"><img typeof="foaf:Image" src="http://localhost/mysite/sites/default/files/styles/thumbnail/public/45c857_57fbe09be65ba8c265ee621184267e45.jpg" width="100" height="100" alt=""></a></div>  </div> 
                      </td>
              </tr>
      </tbody>
</table>
    </div>






</div></div>  </div>
</body>
</html>


$（“.motorkes wrapper”）.animate（{scroll:'+=50'}，1000，'easeOutQuad'）；
.摩托车包装{
高度：170px；
背景色：#000；
宽度：200px；
溢出：滚动；
溢出y：隐藏；
}

您需要使用

scrollTop

或

scrollLeft

，具体取决于您想要滚动的方向

$(".motorcycles-wrapper").animate({
    scrollTop: "+=50"
    }, 1000);

^这将向下滚动50

$(".motorcycles-wrapper").animate({
    scrollLeft: "+=50"
    }, 1000);

^这将向右滚动50次

$(".motorcycles-wrapper").animate({
    scrollLeft: "+=50"
    }, 1000);