Question

这里有一个漂亮的flash横幅：http://osc4.template-help.com/drupal_30779/。我想知道是否有一个jquery库可以让我达到同样的效果。（单击，滑动，展开）。提前致谢

Answer 1

我写了一个小答案，这是一个好的开始。工作代码位于http://jsfiddle.net/fxBjw/，此处为

HTML

<div id="container">
    <ul>
        <li class="block" id="a"></li>
        <li class="block" id="b"></li>
        <li class="block" id="c"></li>
        <li class="block" id="d"></li>
        <li class="block" id="e"></li>
    </ul>
</div>

CSS

#container {
    height: 100px;
    width: 245px;
    border: #000 1px solid;
    overflow: hidden;
}
/*I am not great with css so the only thing i think you could do better is the positioning.
Maybe style everything in JS and use position absolute
there also may be a better way to handle the overflow but this is a good jq start*/
.block {
    width: 45px;
    height: 100px;
    display: inline-block;
    margin: 0px;
    position: relative;
    background-repeat: no-repeat;
}

#a {
    background: url(http://rndimg.com/ImageStore/OilPaintingOrange/50x100_OilPaintingOrange_d190c94ef0c845399e2849fd7e9d54de.jpg);}
#b {
    background: url(http://rndimg.com/ImageStore/OilPaintingBlue/50x100_OilPaintingBlue_44398b9cfff447938d5b02c56e275611.jpg);}
#c {
background: url(http://rndimg.com/ImageStore/OilPaintingGreenReal/50x100_OilPaintingGreenReal_d3284c223f484ad584d4cc6d9de29ba5.jpg);
}
#d {background: url(http://rndimg.com/ImageStore/OilPaintingGreen/50x100_OilPaintingGreen_03938e7dbfa74b0f861d9a0851a34455.jpg); }
#e {background: url(http://rndimg.com/ImageStore/OilPaintingBlueReal/50x100_OilPaintingBlueReal_d2e4856d7e4e4224b42ced5cf6675132.jpg); }

JS

//This creates the click function in jquery
$('#container li').click(function (event) {
    //Create a var for the index of the LI
    var ind = $(this).index();
    //Move the LI right to the edge I am not good with stying so there is probably a better way to do this also in the CSS
    //The set up is you move it to the right * the number of elements it is in the list
    $(this).animate({
       'right': ind*50+'px'
    });
    //Now for all the other list items
    $('#container li').each(function () {
        //Check if the items are after the one clicked if so move them off to the right
    if ($(this).index() > ind) {
             $(this).animate({ 'left': '200px'});
        //if they are smaller mover them to the left
    } else if ($(this).index() < ind ){
        $(this).animate({ 'right': '200px'});
    }});
});

我没有添加重置按钮，只需再次点击运行，返回动画应该非常直接。

PS。谢谢你给我一个不做HW的借口

Answer 2

我同意Blender，这不会很难编码。

如果您不熟悉，请查看文档并了解它。 The Jquery API

还打印此备忘单 - ＆gt; Jquery Cheat sheet

如果你想快速查找一些东西，那么备忘单很方便。

你可以从这样的事情开始 - ＆gt; http://www.marghoobsuleman.com/jQuery-common-accordion然后修改它以获得您想要的确切结果。

取决于您想要的不同，修改现有示例可能会更快，而不是从头开始写。

Jquery滑块横幅

2 个答案: