scrollTo внутри аккордеона - PullRequest
Новая
       5

scrollTo внутри аккордеона

1 голос
/ 25 августа 2011

Я очень стараюсь прикрепить свиток к аккордеону, но, кажется, если первый работает, последний перестает работать, и наоборот.

Вот чего я хочу добиться,

http://www.ge -energy.com /

и вот мой код, который я написал для этого

http://jsfiddle.net/ztFWv/51/

Что мне делать?

Ответы [ 2 ]

0 голосов
/ 25 августа 2011

Попробуйте это:

http://jsfiddle.net/Yz9NW/1/

Собрано довольно быстро, но с некоторыми изменениями может справиться с работой.

Используется пользовательский интерфейс JQueryаккордеон, а также плагин JQuery ScrollTo .

Надеюсь, это поможет.

Редактировать (на основе комментариев)

Требуетсянекоторые модификации в JavaScript.Вот оно: 

<!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>
0 голосов
/ 25 августа 2011

Звучит так, как будто вам нужно .animate() свойство положения фона при выборе элемента. 

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