WebCodeLad 2021-09-03 16:09 采纳率: 58.3%
浏览 57
已结题

在页面上做一个悬浮固定按钮，点击悬浮固定按钮会触发点击事件，效果是:页面一半显示内容被覆盖成一个从后端获取的二维码

用html ,css，JS Jquery，
框架bootstrap，或者layui都行
做出一个
在页面上做一个悬浮固定按钮，点击悬浮固定按钮会触发点击事件，效果是:页面一半显示内容被覆盖成一个从后端获取的二维码

  • 写回答

2条回答 默认 最新

  • CSDN专家-天际的海浪 2021-09-03 17:14
    关注

    点击悬浮按钮显示出一个高度50%的绝对定位的div，就可以覆盖页面下半部分内容，在div 中放从后端获取的二维码图片即可

    类似这样

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
html,body {
    height: 100%;
}

#but {
    width: 64px;
    height: 64px;
    position: fixed;
    right: 0;
    top: 200px;
    z-index: 8;
}
#box {
    width: 100%;
    height: 50%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9;
    background-color: #999;
    text-align: center;
    display: none;
}
#clear {
    position: absolute;
    top: 0;
    right: 0;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#but").click(function(event){
        $("#box").show();
        $.ajax({ //从后端获取的二维码
            url: "url",
            type: "POST",
            data: {name:"xx"},
            dataType: "json",
            success: function (data) {
                $("#pic").attr("src",data.二维码图片地址);
            }
        });
    });
    $("#clear").click(function(event){
        $("#box").hide();
    });
});
</script>
</head>
<body>

<div id="but">
    <img src="1.jpg" width="64" height="64" alt="" />
</div>
<div id="box">
    <input id="clear" type="button" value="关闭" />
    <img id="pic" src="" width="300" height="300" alt="" />
</div>

</body>
</html>

    如有帮助，望采纳！谢谢! 点击我这个回答右上方的【采纳】按钮

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

  • Vue在页面右上角实现可悬浮/隐藏的系统菜单
    2020-08-27 14:33
    这个功能常见于许多网站，用户点击页面右上角的头像时，系统菜单会显示出来，再次点击或点击页面其他区域时，菜单会隐藏。 首先，我们关注的是组件间通信，这是Vue开发中的关键概念。在这个例子中，通过props机制，...
  • Android实现系统级悬浮按钮
    2021-01-20 10:29
    在Android开发中，实现系统级悬浮按钮涉及到多个关键知识点...以上内容详细解释了如何在Android中实现一个具备拖动、靠边和横竖屏切换兼容性的系统级悬浮按钮。在实际项目中，你需要根据具体需求进行相应的调整和优化。
  • Android 全局悬浮View实现，以及悬浮view点击事件
    2020-07-02 08:58
    在Android开发中，全局悬浮View通常被称为悬浮按钮（Floating Action Button, FAB），它是一种设计模式，用于在应用中提供一个突出且显眼的交互点，通常用来触发主要的积极操作。这种设计元素常见于现代Android应用...
  • 悬浮球效果，悬浮按钮，悬浮框 Demo 源代码
    2024-09-26 23:37
    悬浮球效果在设计上通常位于屏幕的边缘或角落，以不干扰主要内容的方式存在，用户可以通过点击悬浮球快速执行某些常用操作。悬浮按钮则是指在应用界面中悬浮显示的小型按钮，它通常用于触发特定的功能或快捷操作。而...
  • 精致悬浮动效按钮：打造网页交互的视觉亮点，html，按钮
    2025-08-26 23:47
    当用户将鼠标悬停于按钮之上时，精心设计的 translateY 动画会使按钮产生微妙的上浮效果，这种细腻的位移变化不仅提供了清晰的交互反馈，更赋予界面生动的生命力。 实现层面，代码结构简洁明了，通过 Tailwind CSS ...
  • 纯js实现可拖拽和点击的悬浮球
    2024-04-01 21:05
    在JavaScript编程中，创建一个可拖拽和点击的悬浮球是一项常见的交互设计任务。这个功能主要应用于各种网页应用，如在线聊天工具、控制面板或游戏等。本文将深入讲解如何利用JavaScript实现这样的功能。 首先，我们...
  • CSS鼠标悬浮DIV后显示DIV外的按钮解决方法
    2020-12-12 03:48
    昨天写样式遇到个问题，如何让鼠标悬浮DIV后，显示DIV外的按钮，可以点击到按钮。 效果如下： 问题： 在DIV hover时候将按钮设为display: block，这是很直接的想法，但是这有个问题，就是在悬浮出现按钮后，鼠标要...
  • MenuDialogFragment-master:第一次提交---大致仿照钉钉的点击悬浮按钮弹出按钮，实现的是一个缩放动画
    2021-05-13 02:49
    开发者通过点击悬浮按钮来触发一个具有缩放动画效果的对话框。这里的关键词有“MenuDialogFragment”（菜单对话框片段）、“第一次提交”（表明这是项目的初始版本）和“缩放动画”。 【描述解析】 ...
  • Android仿知乎悬浮功能按钮FloatingActionButton效果
    2020-08-30 21:28
    知乎上的悬浮功能按钮通常采用FAB设计，点击后会展开更多操作选项，同时伴随着过渡动画和蒙版效果，以提供用户友好的交互体验。在本教程中，我们将探讨如何在Android中实现类似知乎的FAB效果。 首先，我们要了解FAB...
  • js点击出现悬浮窗效果不使用JQuery插件
    2020-10-26 09:27
    在JavaScript中，事件会从最深的节点向上冒泡到DOM树的根节点，如果在按钮的点击事件处理函数中不阻止冒泡，那么点击事件也会触发到包含按钮的其他元素，包括整个文档。在这种情况下，可能会与隐藏悬浮窗口的全局`...
  • C++Qt做一个鼠标在按钮上悬浮3s显示一个悬浮窗口
    2024-06-12 08:40
    苍天饶过谁？的博客 C++Qt做一个鼠标在按钮上悬浮3s显示一个悬浮窗口
  • jQuery图标嵌入悬浮按钮
    2021-04-02 01:54
    jQuery图标嵌入悬浮按钮是一种网页设计技术，它利用jQuery库来实现一种动态效果：当鼠标悬停在图片上方时，会有一个图标悬浮按钮出现，并且图片会变暗，增加了交互性和视觉吸引力。这种效果通常用于提供更多的信息...
  • jquery实现的在底部固定位置悬浮漂浮返回顶部按钮的特效源码.zip
    2022-11-07 23:55
    在网页设计中，为了提升用户体验，常常会在页面滚动到底部时出现一个返回顶部的按钮，让用户可以方便地快速回到页面的起始位置。本压缩包提供的源码是使用jQuery库实现的这种效果，名为"jquery实现的在底部固定位置...
  • 圣诞节，写个程序练练手————Android 全界面悬浮按钮实现
    2020-09-03 00:42
    在Android开发中，实现全界面悬浮按钮通常是为了提供一种便捷的操作入口，让用户可以在任何界面下都能快速触发某个功能。在本文中，我们将探讨如何在Android应用中实现这种效果，主要涉及的技术点包括自定义服务...
  • android 悬浮按钮切换页面
    2014-02-21 11:37
    结合上述所有步骤，你可以实现这样一个功能：当用户点击悬浮按钮时，按钮会淡出，同时触发页面的切换。在新的页面加载完成后，根据需要决定是否要重新显示按钮。 总的来说，实现“android悬浮按钮切换页面”的功能...
  • 手机网页（WAP网页）底部悬浮广告代码带抖动/关闭效果
    2021-03-11 15:41
    在这个例子中，广告框每3秒会执行一次抖动动画，这可能通过设置一个定时器（如`setInterval`函数）来实现，每隔3秒执行一次特定的CSS类切换，以产生抖动视觉效果。 关闭按钮是用户互动的重要部分，它提供了用户对...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 9月12日
  • 已采纳回答 9月4日
  • 创建了问题 9月3日