十 11

Horizontal Accordion

我找到一个非常不错的水平滑动菜单的javascript特效：Horizontal JavaScript Accordion 1kb。我曾经把它应用到好些制作的页面上，但我的需求越来越多，所以情况也比Michael的样例复杂多了，而且，我需要更多的可选选项，就像这样的：

l found Horizontal JavaScript Accordion 1kb and it is very great! I have ever planted it in some pages. But my App is more complicated then the Michael’s demo. And it need to be more optional.
link this:

通过改变物件的宽度去实现像风琴一样的水平滑动是最常用的方法。不过我的是通过改变物件的left位置，并且提供了更多的可选选项，但脚本文件会大一点，达到了8.46kb。还有，我用面向对象的方式编写的，所以可以不用iframe，就可以实现一个页面中有多个风琴滑动效果菜单了。这就有一个简单的样例：

Making horizontal sliding with changing the width of each panel is the most normal way. But my one is by changing the left style of each panel, and it is more optional, but the file is a bit larger: 8.46kb. And it is programmed in OO way, we can have more instances in a page without iframe.Here is a simple demo:

The codes are:

<ul id="hslidemenu" >
<li><img src="images/1.gif" alt="" /></li>
<li><img src="images/2.gif" alt="" /></li>
<li><img src="images/3.gif" alt="" /></li>
<li><img src="images/4.gif" alt="" /></li>
</ul>

And the javascript:

HSlideMenu("hslidemenu").build();

下载：
Download:
hslidemenu.js
hslidemenu-plug.js
点击这里看完整的简介！
Click here to see the full introduce page!

Popularity: 48% [?]

tags Tags: Horizontal Accordion, javascript

This entry was posted 2 months, 3 weeksago at 3:10 下午 and is filed under 网络技术. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Horizontal Accordion”

Nemanja Cosovic Says:
十月 17th, 2008 at 7:38 下午
Hi Govo,

You have replied to me on Michael’s blog about the horizontal, custom width of slidig area. accordion.
Now. I have a problem/question. I dont see in any of the examples how are you using custom width on any of the fields.

Maybe its better for me to specify the problem. I need horizontal accordion for 5 fields. Where the number 3 (center) is activated on load.
——————————-
| | | X | | |
——————————-
Now I can accomplish that with Michaels script, but there is a problem.
The center photo needs to be 500px width, and other 4 pics are 230px width. The height for all photos is 350px.

Currently with Michaels script I can only set the overall expanding width for elements. When its set to 500 (so the visitior is able to see the center image) when he mouse roll-over to antoher I get white space that look, well, bad.

Is there a way to get this to work. I dont care about the size of the script.

Thanks Govo!
GOVO Says:
十月 18th, 2008 at 11:03 下午
Hi Nemanja Cosovic .
Did you mean that you need to set the different MAX WIDTH or MIN WIDTH for each element? I thought my script can help.
But I think it we need to try a other new algorithms to make. Because all the elements’ sliding behavior is correlative. One is sliding, other needs to know what’s happening. It is to complicated!
Nemanja Cosovic Says:
十月 19th, 2008 at 7:21 下午
Can we go to email chat, since I cant put links of the website Im working on here.
And it would be easier to explain.