手风琴demo

来源：互联网发布：linux qq安装教程编辑：程序博客网时间：2024/06/06 17:47
先看一下效果图
进去把图片换一下
<!DOCTYPE html><!--DTD文档声明类型 HTML5 --><html><head lang="en">    <meta charset="UTF-8">    <title>手风琴demo</title>    <style>        *{margin:0;padding:0;}        html,body{height:100%;}        li{ list-style: none;}        body{            position:relative;            /*参考物*/        }        .bg-box{            /*绝对定位 谁动谁儿子 父相子绝*/            position: absolute;            top:0;            left:0;            width:100%;            height:100%;            background:#368 ;        }        .bg-box img{/*inline-block*/            display: block;/*转换成会计元素，清楚默认的对其方式*/            width:100%;            height:100%;        }        #wrap{            position: absolute;            /*top:50%;*/            /*left:50%;*/            /*margin-left:-350px;*/            /*margin-top:-150px;*/            top:0;            left:0;            right:0;            bottom:0;            margin:auto;            width:700px;            height:300px;            border:3px solid #000;        }        #wrap ul{            width:120%;        }        #wrap ul li{            width:100px;            height:300px;            background:url("img/big-img-1.jpg");            float:left;        }        #wrap ul li div{            width:100px;            height:300px;            background:rgba(0,0,0,0.5);        }        #wrap ul li div p{            padding:10px 40px;            color:#fff;            text-align: center;        }        #wrap ul li:nth-child(2){            background: url("img/big-img-2.jpg");        }        #wrap ul li:nth-child(3){            background: url("img/big-img-3.jpg");        }        #wrap ul li:nth-child(4){            width:400px;            background: url("img/big-img-4.jpg");            background-size:cover;        }    </style></head><body><!--页面呈现--><div>    <div class="bg-box">        <img src="img/big-img-1.jpg" width="994" height="626" alt="test"/>    </div>    <div class="bg-box">        <img src="img/big-img-2.jpg" width="994" height="626" alt="test"/>    </div>    <div class="bg-box">        <img src="img/big-img-3.jpg" width="994" height="626" alt="test"/>    </div>    <div class="bg-box">        <img src="img/big-img-4.jpg" width="994" height="626" alt="test"/>    </div></div>   <div id="wrap">       <ul>           <li>               <div>                   <p>我的个人拉萨之旅 &nbsp|&nbsp &nbsp|&nbsp 哈哈哈</p>               </div>           </li>           <li>               <div>                   <p>我的个人拉萨之旅 &nbsp|&nbsp &nbsp|&nbsp 哈哈哈</p>               </div>           </li>           <li>               <div>                   <p>我的个人拉萨之旅 &nbsp|&nbsp &nbsp|&nbsp 哈哈哈</p>               </div>           </li>           <li>               <div>                   <p>我的个人拉萨之旅 &nbsp|&nbsp &nbsp|&nbsp 哈哈哈</p>               </div>           </li>       </ul>   </div></body><script src="js/jquery-1.7.1.min.js"></script><script> var $li = $('#wrap ul li');    var $bg = $('.bg-box');    //li hover时候出发事件    $li.hover(function(){        var index = $(this).index();        $bg.eq(index).fadeIn(300).siblings().fadeOut(300);        $(this).stop().animate({            width:'400px',            'background-size':'cover'        }).siblings('li').stop().animate({            width:'100px'        })    })</script>
阅读全文
0 0