图片手机端浮动布局样式案例

案例说明：

点击隐藏按钮，隐藏对应的图片，后面的图片往前移动。

用到的知识点：

1. CSS样式布局按百分比设置，需求一行放两张图片。

2. jquery使用类选择器 eq属性定位到某个图片

3. 隐藏动画使用的jquery的基本动画效果

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>demo</title>
</head>
<style>
    body{
        padding: 0;
        margin: 0;
    }
    .nav{
        margin: 2%;
    }

    .btn{
        margin: 2%;
        position: absolute;
        top: 300px;
        
    }

    .img{
        width: 48%;
        height: 100px;
        float: left;
        padding:1%;
    }
    img{
        width: 100%;
        height: 100%;

    }

</style>
<body>
    <div class="nav">
        <div class="img">
            <img src="img/1.jpg" alt="">
        </div>

        <div class="img">
            <img src="img/2.jpg" alt="">
        </div>

        <div class="img">
            <img src="img/3.jpg" alt="">
        </div>

        <div class="img">
            <img src="img/4.jpg" alt="">
        </div>
    </div>


    <div class="btn">
        <button id="btn1">关闭图1</button>
        <button id="btn2">关闭图2</button>
        <button id="btn3">关闭图3</button>
        <button id="btn4">关闭图4</button>
        <button id="btn_all">关闭全部</button>
    </div>
</body>
<script>
    $(function(){
        $('#btn1').click(function(){
            if($('#btn1').html()=='关闭图1'){
                $('.img').eq(0).slideToggle(500);
                $('#btn1').html('显示图1');
            }else if($('#btn1').html()=='显示图1'){
                $('.img').eq(0).slideToggle(500);
                $('#btn1').html('关闭图1');
            }
            
        })
        $('#btn2').click(function(){
            if($('#btn2').html()=='关闭图2'){
                $('.img').eq(1).slideToggle(500);
                $('#btn2').html('显示图2');
            }else if($('#btn2').html()=='显示图2'){
                $('.img').eq(1).slideToggle(500);
                $('#btn2').html('关闭图2');
            }
        })
        $('#btn3').click(function(){
            if($('#btn3').html()=='关闭图3'){
                $('.img').eq(2).slideToggle(500);
                $('#btn3').html('显示图3');
            }else if($('#btn3').html()=='显示图3'){
                $('.img').eq(2).slideToggle(500);
                $('#btn3').html('关闭图3');
            }
        })
        $('#btn4').click(function(){
            if($('#btn4').html()=='关闭图4'){
                $('.img').eq(3).slideToggle(500);
                $('#btn4').html('显示图4');
            }else if($('#btn4').html()=='显示图4'){
                $('.img').eq(3).slideToggle(500);
                $('#btn4').html('关闭图4');
            }
        })
        $('#btn_all').click(function(){
            if($('#btn_all').html()=='关闭全部'){
                $('.nav').toggle(300);
                $('#btn_all').html('显示全部');
            }else if($('#btn_all').html()=='显示全部'){
                $('.nav').toggle(300);
                $('#btn_all').html('关闭全部');
            }
        })
    })
</script>
</html>

 

posted @ 2021-03-06 09:17  华北业余选手  阅读(51)  评论(0)    收藏  举报