公司官網首頁常用的橫幅廣告手風琴自動輪播特效及語法 ~ 哈拉999 互動式創意網頁設計

Guler

Guler

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.
more →
Phillips

Phillips

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.
more →
Diamanti

Diamanti

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.
more →
Meiklejohn

Meiklejohn

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.
more →

<!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"/>
        
<script type="text/javascript">

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-7243260-2']);
  _gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
        <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>
        <style>
  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(http://tympanus.net/Tutorials/ElegantAccordion/images/1.jpg);/*480*480*/
}
ul.accordion li.bg2{
    background-image:url(http://tympanus.net/Tutorials/ElegantAccordion/images/2.jpg);/*480*480*/
}
ul.accordion li.bg3{
    background-image:url(http://tympanus.net/Tutorials/ElegantAccordion/images/3.jpg);/*480*480*/
}
ul.accordion li.bg4{
    background-image:url(http://tympanus.net/Tutorials/ElegantAccordion/images/4.jpg);/*480*480*/
}
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;
}
  </style>
    </head>

<body>
        <div id="content">
            <a class="back" href="http://tympanus.net/codrops/2010/04/26/elegant-accordion-with-jquery-and-css3/"></a>
          <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 →</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 →</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 →</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 →</a>
                    </div>

</li>
            </ul>
</div>

<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>
</body>
</html>

猛甲茶道

哈拉999

哈拉999 互動式創意網頁設計

2013年9月21日星期六