本效果可以实现多幅大图滑动展示，jQuery+CSS3实现，非常适合大型图片展示
查看演示页面 View Demo 查看全部代码 View Code
在网页<head>区添加样式调用
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
js代码
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#accordion > li').hover(
function () {
var $this = $(this);
$this.stop().animate({'width':'480px'},500);
$('.heading',$this).stop(true,true).fadeOut();
$('.bgDescription',$this).stop(true,true).slideDown(500);
$('.description',$this).stop(true,true).fadeIn();
},
function () {
var $this = $(this);
$this.stop().animate({'width':'115px'},1000);
$('.heading',$this).stop(true,true).fadeIn();
$('.description',$this).stop(true,true).fadeOut(500);
$('.bgDescription',$this).stop(true,true).slideUp(700);
}
);
});
</script>
HTML代码
<div id="content">
<ul class="accordion" id="accordion">
<li class="bg1">
<div class="heading">Guler</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Guler</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.</p>
<a href="http://www.sharejs.com">more →</a>
</div>
</li>
<li class="bg2">
<div class="heading">Phillips</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Phillips</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. </p>
<a href="http://www.sharejs.com">more →</a>
</div>
</li>
<li class="bg3">
<div class="heading">Diamanti</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Diamanti</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.</p>
<a href="http://www.sharejs.com">more →</a>
</div>
</li>
<li class="bg4 bleft">
<div class="heading">Meiklejohn</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Meiklejohn</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt.</p>
<a href="http://www.sharejs.com">more →</a>
</div>
</li>
</ul>
</div>
