jquery+css3手风琴图片切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery+css3手风琴图片切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
        <head>
        <title>Elegant Accordion with jQuery and CSS3</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Elegant Accordion with jQuery and CSS3" />
        <meta name="keywords" content="jquery, slide out,accordion, css3, fadeout, fadein, elegant, fancy, box shadow"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <style>
* { margin:0; padding:0; }
body { font-family:Arial; background:#fff url(pattern.png) repeat top left; }
a { color:#444; }
a:hover { color:#999; }
.title { width:500px; height:152px; position:absolute; top:0px; left:0px; background:transparent url(title.png) no-repeat top left; }
a.back { background:transparent url(back.png) no-repeat top left; position:fixed; width:150px; height:27px; outline:none; bottom:0px; left:0px; }
#content { margin:0 auto; }
.reference { clear:both; top:300px; left:0px; position:absolute; text-align:right; width:400px; padding:20px; background-color:#fff; -moz-box-shadow:1px 3px 15px #ddd; -webkit-box-shadow:1px 3px 15px #ddd; box-shadow:1px 3px 15px #ddd; }
.reference p a { text-transform:uppercase; text-shadow:1px 1px 1px #fff; color:#666; text-decoration:none; font-size:10px; }
.reference p a:hover { color:#333; }
</style>
        </head>

        <body>
<div id="content">           <div class="title"></div>
          
          <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="#">more &rarr;</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="#">more &rarr;</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="#">more &rarr;</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="#">more &rarr;</a> </div>
            </li>
  </ul>
        </div>

<!-- The JavaScript --> 
<script type="text/javascript" src="jquery-1.7.2.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>
</body>
</html>

CSS代码(style.css):

ul.accordion{list-style:none;position:absolute;right:80px;top:0px;font-family:Cambria,serif;font-size:16px;font-style:italic;line-height:1.5em;}
ul.accordion li{float:right;width:115px;height:480px;display:block;border-right:2px solid #fff;border-bottom:2px solid #fff;background-color:#fff;background-repeat:no-repeat;background-position:center center;position:relative;overflow:hidden;cursor:pointer;-moz-box-shadow:1px 3px 15px #555;-webkit-box-shadow:1px 3px 15px #555;box-shadow:1px 3px 15px #555;}
ul.accordion li.bg1{background-image:url(../images/1.jpg);}
ul.accordion li.bg2{background-image:url(../images/2.jpg);}
ul.accordion li.bg3{background-image:url(../images/3.jpg);}
ul.accordion li.bg4{background-image:url(../images/4.jpg);}
ul.accordion li.bleft{border-left:2px solid #fff;}
ul.accordion li .heading{background-color:#fff;padding:10px;margin-top:60px;opacity:0.9;text-transform:uppercase;font-style:normal;font-weight:bold;letter-spacing:1px;font-size:14px;color:#444;text-align:center;text-shadow:-1px -1px 1px #ccc;}
ul.accordion li .description{position:absolute;width:480px;height:175px;bottom:0px;left:0px;display:none;}
ul.accordion li .description h2{text-transform:uppercase;font-style:normal;font-weight:bold;letter-spacing:1px;font-size:45px;color:#444;text-align:left;margin:0px 0px 15px 20px;text-shadow:-1px -1px 1px #ccc;}
ul.accordion li .description p{line-height:14px;margin:10px 22px;font-family:"Trebuchet MS",sans-serif;font-size:12px;font-style:italic;font-weight:normal;text-transform:none;letter-spacing:normal;line-height:1.6em;}
ul.accordion li .description a{position:absolute;bottom:5px;left:20px;text-transform:uppercase;font-style:normal;font-size:11px;text-decoration:none;color:#888;}
ul.accordion li .description a:hover{color:#333;text-decoration:underline;}
ul.accordion li .bgDescription{background:transparent url(../images/bgDescription.png) repeat-x top left;height:340px;position:absolute;bottom:0px;left:0px;width:100%;display:none;}

附件:下载该文件资源,减少时间成本(增值服务)