0

我想制作一个 div 滚动条来滚动带有缓动动画的内容。是否可以在几行代码中使用 jquery？

http://jsfiddle.net/aHVpA/

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

这是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>
4

1 回答 1

0

您需要使用scrollTop或scrollLeft取决于您想要滚动的方向。

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

^ 这将向下滚动 50。

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

^ 这将向右滚动 50。

于 2013-03-22T07:00:39.820 回答