固定底部悬浮在底部css效果顶部layui

lumengabc

已于 2024-01-14 21:31:39 修改

阅读量615

点赞数 8

文章标签： css layui 前端

于 2024-01-14 21:16:09 首次发布

本文链接：https://blog.csdn.net/webnoties/article/details/135588853

版权

css固定底部悬浮在底部顶部

<link href="//unpkg.com/layui@2.9.3/dist/css/layui.css" rel="stylesheet">

<div class="layui-btn-container" style="position:fixed; bottom: 10px; right: 10px;">
    <button type="button" class="layui-btn layui-bg-blue">蓝色按钮</button>
</div>

优化下代码，并附上JQUERY

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello World</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="/assets/layui/css/layui111.css" rel="stylesheet">
    <script type="text/javascript" src="/assets/js/jquery.js"></script>

</head>
<body class="layui-padding-3">


<div class="layui-btn-container">
    <?php foreach($result as $row):?>
    <div class="products_lists" goods_attr_id="<?php echo $row['goods_attr_id'];?>">
        <div><img src="<?php echo $row['goods_image1'];?>" style="width:100px;height:100px;"></div>
        <div class="products_title"><?php echo $row['goods_name1'];?> <?php echo $row['goods_attr'];?></div>
    </div>
    <?php endforeach;?>
</div>


<div style="clear: both;"></div>


<div style="height: 30px;"></div>

<div style="position:fixed; bottom: 0px; right: 0px;text-align: center;padding:3px; background-color: #fff; width: 100%;">

<div class="layui-btn-container">
    <button type="button" class="layui-btn layui-bg-blue">下一步</button>
</div>
</div>
<style>
    .products_lists{display:block;height:160px; border:1px solid #F2F2F2; padding: 3px; float: left;margin: 5px; text-align: center;}
    .products_lists img{height:100px;}
    .products_title{max-width:100px;}
    .selected_div{background-color: #1e9fff; color: #ffffff;}
</style>

<script type="text/javascript">
    $(function (){
        id_lists = [];
        $(".products_lists").click(function () {
            goods_attr_id = $(this).attr("goods_attr_id");
            if ($(this).hasClass("selected_div")) {
                $(this).removeClass("selected_div");
                // 使用 jQuery.inArray 查找 ID 在数组中的索引
                var index = $.inArray(goods_attr_id, id_lists);
                if (index !== -1) {
                    id_lists.splice(index, 1);
                }
            } else {
                $(this).addClass("selected_div");
                id_lists.push(goods_attr_id);
            }
            console.log(id_lists);
        });

    });
</script>

</body>
</html>