使jQuery動畫滾動條滾動最簡單的方法

我想做一個div滾動條滾動內容與緩動畫。是否有可能在幾行代碼中使用jquery？使jQuery動畫滾動條滾動最簡單的方法

$(".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>

來源

2013-03-22 hkguile

您需要使用取決於你想向滾動的方向scrollTop或scrollLeft。

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

^這將滾動50向下。

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

^這將滾動50向右。

來源

2013-03-22 07:00:39

使jQuery動畫滾動條滾動最簡單的方法

回答

相關問題