2012-08-08 53 views
1

我使用roundabout plugin爲旋轉木馬設置動畫效果,但一切正常,但我無法獲得像the image那樣的渲染效果,這代表了我想要的旋轉木馬效果,而this link代表了我當前的代碼效果。是否有可能獲得帶有環形交通插件的旋轉木馬?

我打的可用選項的插件值可惜仍然無法獲得定位爲圖像中的項目,我也想知道如何設置尺寸爲<li>

我真的感到沮喪和過度,我不知道這是因爲我不夠聰明或什麼。

$(document).ready(function() { 
    $('#sample-roundabout').roundabout({ 
     tilt: 0.9, 
     minScale: 1, 
     maxsCale: 3, 
     minOpacity: 1, 
     duration: 400 
    }, function() { 
     $(this).fadeTo(500, 1); 
    }); 
}); 
+0

您應該給我們一種非靜態的方式來查看您的圖像,或者活的網站會做,或者你可以創建一個[Fiddle](http://jsfiddle.net)。 – Vap0r 2012-08-08 20:26:07

+0

完成了,plz幫我出 – user1583331 2012-08-09 02:21:05

回答

0

您需要在UL的寬度設置爲較小的值,你希望得到什麼,儘量在你這樣的CSS樣式表:

#sample-roundabout{ 
    width: 400px; 
} 

只是玩弄這個價值和傾向可能很大,而且我認爲你不會太辛苦一段時間才能開始工作。

+0

但是li項目的寬度怎麼樣,它們是由插件自動設置的。 – user1583331 2012-08-09 16:11:36

+0

不,我認爲我需要動態地改變li項目的寬度,高度和位置。 怎麼回事,我想要達到的滑塊的寬度是950px,而你要求我將它縮小到400px! – user1583331 2012-08-09 16:29:58

+0

即使我這樣做,我怎麼能給列表項目我自己的維度,而不是由插件設置的? – user1583331 2012-08-09 16:33:01

0

嚴格使用CSS可以做些like thishttp://jsbin.com/ezukov/1/edit#html,live

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0 auto; 
    width: 863px; 
    height: 300px; 
} 
li { 
    height: 220px; 
    width: 621px; 
    background-color: #ccc; 
    text-align: center; 
    cursor: pointer; 
} 
    li.roundabout-in-focus { 
    margin-top:50px; 
    background:red; 
    cursor: default; 
} 

進一步說那麼這可以創建回調函數順利動畫中滑座備份它的lazysusan動畫之前。或者如果你想要不同的東西,你可以創建自己的roundabout shape animation

+0

安東尼你真的澄清了我腦海中所有的含糊之處,但請告訴我請你在你看來改變任何jQuery插件的有效方法是什麼。 謝謝你,我欣賞 – user1583331 2012-08-10 01:14:36

+0

在這種情況下,CSS可能會解決它,但它可以通過JS解決。所以老老實實地學習javascript是最重要的,然後儘可能多地閱讀插件的源代碼。有時候你會在通常的用戶文檔中找不到的插件或框架的實際源代碼中找到合適的代碼。它幫助我學習了很多東西,所以「學習閱讀資料,盧克!」 http://www.codinghorror.com/blog/2012/04/learn-to-read-the-source-luke.html – 2012-08-10 01:44:56