scrollTo裏面的手風琴

<!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>Untitled Document</title> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2.js"></script> 
<link type="text/css" rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" /> 

<script type="text/javascript"> 
var itemWidth = 400; 

$(document).ready(function(){ 
    $('#container').width($(document).width()-10); 
    $("#accordion").accordion({ fillSpace: true }); 

    $('#accordion> h3').click(function() { 
     var index = ($('h3').index(this)); 
     $('#container').scrollTo((index * itemWidth).toString() + 'px', 800); 
    }); 
}); 
</script> 

<style type="text/css"> 

#accordion 
{ 
    width:200px; 
    font-size:12px; 
} 

#navigation 
{ 
    position:absolute; 
    top:10px; 
    left:15px; 
    height:300px; 
    cursor:pointer; 
} 

#container 
{ 
    width:600px; 
    overflow:hidden; 
} 

#items 
{ 
    width:2000px; 
} 

.item 
{ 
    width:400px; 
    height:300px; 
    float:left; 
    background-color:#a9a9a9; 
    text-align:left; 
} 

</style> 

</head> 

<body> 

<div id="navigation"> 
<div id="accordion"> 
    <h3><a href="#">Section 1</a></h3> 
    <div> 
     <p> 
     Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
     ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
     amet, nunc. 
     </p> 
    </div> 
    <h3><a href="#">Section 2</a></h3> 
    <div> 
     <p> 
     Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet 
     purus. Vivamus hendrerit. 
     </p> 
    </div> 
    <h3><a href="#">Section 3</a></h3> 
    <div> 
     <p> 
     Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. 
     Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero 
     ac tellus pellentesque semper. 
     </p> 
     <ul> 
      <li>List item one</li> 
      <li>List item two</li> 
      <li>List item three</li> 
     </ul> 
    </div> 
    <h3><a href="#">Section 4</a></h3> 
    <div> 
     <p> 
     Cras dictum. Pellentesque habitant morbi tristique senectus et netus 
     et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in 
     faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia 
     mauris vel est. 
     </p> 
    </div> 
</div>  
</div> 
<div id="container"> 
    <div id="items"> 
     <div class="item"> 
      <img src="http://businesstm.com/wp-content/uploads/2010/02/mlm-downline-building.jpg"> 
     </div> 
     <div class="item"> 
      <img src="http://www.socalfools.org/wp-content/uploads/2011/04/The-importance-of-advertising-in-the-marketing-business.jpg"> 
     </div>   
     <div class="item"> 
      <img src="http://www.rhylbusinessgroup.co.uk/admin/Image/grey_business_group.jpg">   
     </div>   
     <div class="item"> 
      <img src="http://www.businesscrm.net/wp-content/uploads/2009/07/Sales-Automation.jpg"> 
     </div>   
     <div class="item"> 
      <img src="http://www.aworldafilm.com/wp-content/uploads/2011/05/Selecting-the-Right-Online-Business.jpg"> 
     </div>    
    </div> 
</div> 

</body> 
</html>

來源

2011-08-24 23:30:08 jdavies

我想我把腳本中的鏈接錯了嗎？ – Chaki

這個問題[http://jsfiddle.net/Yz9NW/4/](http://jsfiddle.net/Yz9NW/4/）是你的html部分。它包含對不存在的文件的引用以及重複的javascript。當刪除時，它的工作方式與我的示例相同：[http://jsfiddle.net/Yz9NW/1/](http://jsfiddle.net/Yz9NW/1/） – jdavies

腳本已包含在內（請參閱manage resources區域在左邊），任何你想包括的CSS都可以添加到右邊的CSS窗格中。 – jdavies

這聽起來像你需要.animate()項目選擇的背景位置屬性。

$('#myBackgroundImage').animate({ 
      backgroundPosition: -4000 /* whatever you want */ 
    }, 1000, function() 
    { 
     alert('Animation Complete'); 
    });

來源

2011-08-24 22:07:34 Tejs

請你能提供一個例子在jsfiddle，因爲我是完全陌生的這些東西。不知道很多abou jquery :) – Chaki

scrollTo裏面的手風琴

回答

相關問題