Welcome, Old Sport!

jQuery 和 CSS 实现简单的显示切换功能

by ilikecss ON 2010/08/12 4104

今天我想用一个简便的方法,利用 jQuery 和 CSS 实现页面布局显示切换功能,可能大家已经有过很多种方法,Anyway,如果大家觉得好就顶一下吧。一般这种布局用在展示自己的作品或是摄影集。

Step1. 创建HTML

<p class="switch"><a href="#" class="switch_thumb">Switch Display</a></p>
<ul class="display">
    <li>
    <div class="content_block">
    <a href="#"><img src="images/sample.gif" alt="Sample" /></a>
    <h4><a href="#">Sunflowa Media</a></h4>
    <p>Hey, I'm Airos Chou.</p>
    <p>I am a freelance web designer &amp; graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.</p>
    </div>
    </li>
    <li>
    <div class="content_block">
    <a href="#"><img src="images/sample2.gif" alt="Sample" /></a>
    <h4><a href="#">Sunflowa Media</a></h4>
    <p>Hey, I'm Airos Chou.</p>
    <p>I am a freelance web designer &amp; graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.</p>
    </div>
    </li>
    <li>
    <div class="content_block">
    <a href="#"><img src="images/sample3.gif" alt="Sample" /></a>
    <h4><a href="#">Sunflowa Media</a></h4>
    <p>Hey, I'm Airos Chou.</p>
    <p>I am a freelance web designer &amp; graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.</p>
    </div>
    </li>
</ul>

Step2. 创建CSS

p.switch {
width: 122px;
height: 26px;
margin-bottom: 15px;
background: url(../images/switch_bg.gif) no-repeat;
}
a.switch_thumb {
width: 34px;
height: 26px;
line-height: 26px;
padding: 0;
margin: 0 0 0 80px;
display: block;
background: url(../images/switch_btn.gif) no-repeat;
outline: none;
text-indent: -9999px;
}
a.swap { background-position: left bottom; }
a:hover.switch_thumb {
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
ul.display {
width: 744px;
background: #222 none repeat scroll 0 0;
border-right: 1px solid #333;
border-top: 1px solid #333;
margin: 0;
padding: 0;
overflow: hidden;
clear: both;
}
ul.display li {
width: 742px;
float: left;
margin: 0;
padding: 10px 0;
border: 1px solid;
border-color: #111 #111 #333 #333;
}
ul.display li a {
color: #DDD;
text-decoration: none;
font-size: 140%;
}
ul.display li .content_block {
padding: 0 10px;
}
ul.display li .content_block h4 {
margin: 0;
padding: 5px;
}
ul.display li .content_block p {
margin: 0;
padding: 5px 5px 5px 241px; /*--The left padding keeps the content from flowing under the image--*/
color: #CCC;
}
ul.display li .content_block a img{ /*--Double border technique--*/
border: 5px solid #ccc;
background: #fff;
margin: 0 15px 0 0;
float: left;
}
/*-- Switch the width to accommodate for the three column layout-- */
ul.thumb_view li {
width: 246px;
}
ul.thumb_view li h4 {
display: inline;
}
ul.thumb_view li p {
display: none;
}
ul.thumb_view li .content_block a img {
margin: 0 0 10px;
}

Step3. 插入jQuery和脚本包

$(document).ready(function(){
    $("a.switch_thumb").toggle(function(){
        $(this).addClass("swap");
        $("ul.display").fadeOut("fast", function() {
            $(this).fadeIn("fast").addClass("thumb_view");
        });
    }, function () {
        $(this).removeClass("swap");
        $("ul.display").fadeOut("fast", function() {
            $(this).fadeIn("fast").removeClass("thumb_view");
        });
    });
});
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
目前还没有评论



TOP