我爱模板网 > 特效插件 > 选项卡特效 >  兼容IE6,纯CSS打造带tab选项卡,鼠标移上图片放正文

兼容IE6,纯CSS打造带tab选项卡,鼠标移上图片放

特效介绍

纯css tab选项卡

兼容IE6等主流浏览器,不含任何js代码的纯CSS打造带tab选项卡,鼠标移上图片放大功能的相册

使用方法

1、复制以下代码粘贴到你想要显示的区域

<style type="text/css">
    a {color:#000;} a:hover {text-decoration:none;} a:visited {color:#000;}
    .photo {width:635px; text-align:left; position:relative; margin:0 auto;}
    .photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto;
    position:relative; z-index:10;} .photo ul.topic li {display:block; width:125px;
    height:31px; float:left;} .photo ul.topic li a.set {display:block; font-size:11px;
    width:124px; height:30px; text-align:center; line-height:30px; color:#000;
    text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0;
    background:#ccc; font-family:verdana, arial, sans-serif;} .photo ul.topic
    li a ul, .photo ul.topic li ul {display:none;} .photo ul.topic li.active
    a {color:#000; background:#bbb;} .photo ul.topic li a:hover, .photo ul.topic
    li:hover a {color:#fff; background:#aaa;} .photo ul.topic li.active ul
    {display:block; position:absolute; left:0; top:31px; list-style:none; padding:0;
    margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px;
    border:20px solid #bbb; z-index:1;} .photo ul.topic li a:hover ul, .photo
    ul.topic li:hover ul {display:block; position:absolute; left:0; top:31px;
    list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px;
    padding:40px 60px; border:20px solid #aaa; z-index:100;} .photo ul.topic
    li ul li {display:inline; width:112px; height:87px; float:left; border:1px
    solid #fff; margin:1px;} .photo ul.topic li ul li a {display:block; width:110px;
    height:85px; cursor:default; float:left; text-decoration:none; background:#444;
    border:1px solid #888;} .photo ul.topic li ul li a img {display:block;
    width:100px; height:75px; border:5px solid #eee;} .photo ul.topic li a:hover
    ul li a:hover, .photo ul.topic li:hover ul li a:hover {white-space:normal;
    position:relative;} .photo ul.topic li a:hover ul li a:hover img, .photo
    ul.topic li:hover ul li a:hover img {position:absolute; left:-50px; top:-32px;
    width:200px; height:150px; border-color:#fff;}
</style>
<div class="photo">
    <ul class="topic">
        <li>
            <a class="set" href="#Portraits">
                Portraits
                <!--[if gte IE 7]>
                    <!-->
            </a>
        <!--<![endif]-->
        <!--[if lte IE 6]>
            <table>
                <tr>
                    <td>
                    <![endif]-->
                    <ul>
                        <li>
                            <a href="lbox/portrait1.jpg">
                                <img src="images/portrait1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/portrait2.jpg">
                                <img src="images/portrait1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/portrait3.jpg">
                                <img src="images/portrait1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/portrait4.jpg">
                                <img src="images/portrait1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/portrait5.jpg">
                                <img src="images/portrait1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/portrait6.jpg">
                                <img src="images/portrait1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/portrait7.jpg">
                                <img src="images/portrait1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/portrait8.jpg">
                                <img src="images/portrait1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/portrait9.jpg">
                                <img src="images/portrait1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/portrait10.jpg">
                                <img src="images/portrait1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/portrait11.jpg">
                                <img src="images/portrait1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/portrait12.jpg">
                                <img src="images/portrait1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/portrait13.jpg">
                                <img src="images/portrait1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/portrait14.jpg">
                                <img src="images/portrait1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/portrait15.jpg">
                                <img src="images/portrait1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/portrait16.jpg">
                                <img src="images/portrait1a.jpg" alt="" title="" />
                            </a>
                        </li>
                    </ul>
                    <!--[if lte IE 6]>
                    </td>
                </tr>
            </table>
            </a>
        <![endif]-->
        </li>
        <li class="active">
            <a class="set" href="#Landscapes">
                Landscapes
                <!--[if gte IE 7]>
                    <!-->
            </a>
        <!--<![endif]-->
        <!--[if lte IE 6]>
            <table>
                <tr>
                    <td>
                    <![endif]-->
                    <ul>
                        <li>
                            <a href="lbox/landscape1.jpg">
                                <img src="images/landscape1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/landscape2.jpg">
                                <img src="images/landscape1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/landscape3.jpg">
                                <img src="images/landscape1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/landscape4.jpg">
                                <img src="images/landscape1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/landscape5.jpg">
                                <img src="images/landscape1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/landscape6.jpg">
                                <img src="images/landscape1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/landscape7.jpg">
                                <img src="images/landscape1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/landscape8.jpg">
                                <img src="images/landscape1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/landscape9.jpg">
                                <img src="images/landscape1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/landscape10.jpg">
                                <img src="images/landscape1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/landscape11.jpg">
                                <img src="images/landscape1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/landscape12.jpg">
                                <img src="images/landscape1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/landscape13.jpg">
                                <img src="images/landscape1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/landscape14.jpg">
                                <img src="images/landscape1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/landscape15.jpg">
                                <img src="images/landscape1a.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="lbox/landscape16.jpg">
                                <img src="images/landscape1a.jpg" alt="" title="" />
                            </a>
                        </li>
                    </ul>
                    <!--[if lte IE 6]>
                    </td>
                </tr>
            </table>
            </a>
        <![endif]-->
        </li>
        <li>
            <a class="set" href="#Flowers">
                Flowers
                <!--[if gte IE 7]>
                    <!-->
            </a>
        <!--<![endif]-->
        <!--[if lte IE 6]>
            <table>
                <tr>
                    <td>
                    <![endif]-->
                    <ul>
                        <li>
                            <a href="#flower1">
                                <img src="images/flower1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#flower2">
                                <img src="images/flower1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#flower3">
                                <img src="images/flower1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#flower4">
                                <img src="images/flower1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#flower5">
                                <img src="images/flower1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#flower6">
                                <img src="images/flower1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#flower7">
                                <img src="images/flower1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#flower8">
                                <img src="images/flower1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#flower9">
                                <img src="images/flower1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#flower10">
                                <img src="images/flower1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#flower11">
                                <img src="images/flower1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#flower12">
                                <img src="images/flower1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#flower13">
                                <img src="images/flower1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#flower14">
                                <img src="images/flower1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#flower15">
                                <img src="images/flower1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#flower16">
                                <img src="images/flower1.jpg" alt="" title="" />
                            </a>
                        </li>
                    </ul>
                    <!--[if lte IE 6]>
                    </td>
                </tr>
            </table>
            </a>
        <![endif]-->
        </li>
        <li>
            <a class="set" href="#Trees">
                Trees
                <!--[if gte IE 7]>
                    <!-->
            </a>
        <!--<![endif]-->
        <!--[if lte IE 6]>
            <table>
                <tr>
                    <td>
                    <![endif]-->
                    <ul>
                        <li>
                            <a href="#tree1">
                                <img src="images/tree1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#tree1">
                                <img src="images/tree1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#tree1">
                                <img src="images/tree1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#tree1">
                                <img src="images/tree1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#tree1">
                                <img src="images/tree1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#tree1">
                                <img src="images/tree1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#tree1">
                                <img src="images/tree1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#tree1">
                                <img src="images/tree1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#tree1">
                                <img src="images/tree1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#tree1">
                                <img src="images/tree1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#tree1">
                                <img src="images/tree1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#tree1">
                                <img src="images/tree1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#tree1">
                                <img src="images/tree1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#tree1">
                                <img src="images/tree1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#tree1">
                                <img src="images/tree1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#tree1">
                                <img src="images/tree1.jpg" alt="" title="" />
                            </a>
                        </li>
                    </ul>
                    <!--[if lte IE 6]>
                    </td>
                </tr>
            </table>
            </a>
        <![endif]-->
        </li>
        <li>
            <a class="set" href="#Birds">
                Birds
                <!--[if gte IE 7]>
                    <!-->
            </a>
        <!--<![endif]-->
        <!--[if lte IE 6]>
            <table>
                <tr>
                    <td>
                    <![endif]-->
                    <ul>
                        <li>
                            <a href="#bird1">
                                <img src="images/bird1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#bird2">
                                <img src="images/bird1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#bird3">
                                <img src="images/bird1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#bird4">
                                <img src="images/bird1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#bird5">
                                <img src="images/bird1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#bird6">
                                <img src="images/bird1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#bird7">
                                <img src="images/bird1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#bird8">
                                <img src="images/bird1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#bird9">
                                <img src="images/bird1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#bird10">
                                <img src="images/bird1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#bird11">
                                <img src="images/bird1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#bird12">
                                <img src="images/bird1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#bird13">
                                <img src="images/bird1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#bird14">
                                <img src="images/bird1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#bird15">
                                <img src="images/bird1.jpg" alt="" title="" />
                            </a>
                        </li>
                        <li>
                            <a href="#bird16">
                                <img src="images/bird1.jpg" alt="" title="" />
                            </a>
                        </li>
                    </ul>
                    <!--[if lte IE 6]>
                    </td>
                </tr>
            </table>
            </a>
        <![endif]-->
        </li>
    </ul>
    <br class="clear" />
</div>



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:没有了 下一篇:jquery tab选项卡式图片轮播
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢