scrollTo inside an Accordion
I'm trying ver开发者_如何学编程y hard to attach a scrollTo inside an accordion, but it seems, if the the former works the latter stop working, vice versa.
Here's what I want to achieve,
http://www.ge-energy.com/
and here's my code that I wrote for this
http://jsfiddle.net/ztFWv/51/
What should I do?
Try this out:
http://jsfiddle.net/Yz9NW/1/
Its thrown together fairly quickly but with some modifications it could do the job.
It makes use of the JQuery UI accordian as well as the JQuery ScrollTo plugin.
Hope it helps.
Edit (Based on comments)
Needed some modifications to the javascript. Here it is:
<!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>
It sounds like you need to .animate() the background position property on item select.
$('#myBackgroundImage').animate({
backgroundPosition: -4000 /* whatever you want */
}, 1000, function()
{
alert('Animation Complete');
});
加载中,请稍侯......
精彩评论