手风琴demo

最新推荐文章于 2021-07-17 09:42:22 发布

小牛呗

最新推荐文章于 2021-07-17 09:42:22 发布

阅读量450

点赞数

分类专栏： demo 文章标签： demo

本文链接：https://blog.csdn.net/qq_35679291/article/details/73823426

版权

demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先看一下效果图

进去把图片换一下

<!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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
手风琴demo

进去把图片换一下<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>手风琴demo</title> <style> *{margin:0;padding:0;} html,body{height:100%;}
复制链接

扫一扫

专栏目录