首页 > 其他分享 >点击屏幕新增一个按钮/图片等控件

点击屏幕新增一个按钮/图片等控件

时间:2024-08-26 11:38:07浏览次数:8  
标签:控件 const img 点击 按钮 rect 图片

在日常代码编写中,有时候会遇到一些在页面中随机点击新增一个按钮,图片等控件或文字,此时我们需要用到如下代码
代码如下
html:

js:
1.先设置图片
var img = $('');
img.attr('ID', 'myCarousels123'); // 设置图片源
img.attr('src', '/GateMana/FindImage?GateID=' + obj.gateID); // 设置图片源
$('.TemplateImg').append(img); // 将图片添加到body中

2.获取点击的X,Y轴数据,并且生成对应控件
const element = document.getElementById('myCarousels123'); //获取当前背景,用来定位
const rect = element.getBoundingClientRect();
const width = rect.width; //宽
const height = rect.height; //高
const xPercentage = (event.clientX - rect.left) / width * 100; //定位计算可按照自身需求经行修改
const yPercentage = (event.clientY - rect.top) / height * 100;
var btn = document.createElement('button'); //生成按钮button
btn样式绑定,可按照需求设定
$('.TemplateImg').append(btn); //生成控件

标签:控件,const,img,点击,按钮,rect,图片
From: https://www.cnblogs.com/rookie-X/p/18380702

相关文章

  • JavaFX单选按钮
    单选按钮通常组合在一起,以便用户进行单选,即用户只能在单选按钮列表中选择一个项目。例如,当选择鞋子尺寸时,我们通常从列表中选择一个尺寸。单选按钮只能执行:选择或取消选择。以下代码显示,当放置在ToggleGroup中时,只能选择一个RadioButton。importjavafx.application.Applic......
  • 微信不能打开,点击微信后显示无法定位程序输入点CreateTOolhelp32Snapshot于动态链接库
    问题描述:解决方法:修复动态链接库KERNEL32.dll重新安装动态链接库KERNEL32.dll检查应用程序兼容性与更新,或查找应用程序的补丁以修复可能存在的与kernel32.dll相关的兼容性问题下载最新版微信,卸载微信,重启电脑,退出杀毒软件后,重新安装最新版。原因:    1、系统文件损......
  • delphi dxCameraControl控件(拍照)
    拍照演示DevExpressVCL组件之一 TdxCameraControlObjectHierarchy  Properties  Methods  Events 一个摄像头控件Unit dxCameraControl Syntax TdxCameraControl= class(TdxCustomCameraControl) Descrition 该控件允许您捕捉视频或图像从内......
  • 如何创建图片按钮
    文章目录1.概念介绍2.使用方法2.1filled风格2.2filledTonal风格2.3outlined风格3.代码与效果3.1示例代码3.2运行效果4.内容总结我们在上一章回中介绍了"如何修改NavigationBar组件的形状"相关的内容,本章回中将介绍IconButtion组件.闲话休提,让我们一起Talk......
  • 原神4.8版本重点培养和抽到角色数据表:修改了添加倒计时.隐藏了抽到角色数据表删除按钮
    <!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>原神4.8版本抽到角色和重点培养数据表<......
  • 控件与布局
    1.控件的分类:主要要6大类 一.布局控件:可以容纳多个控件或者嵌套其他布局控件,用于在UI上组织和排列控件。Grid、StackPanel、DockPanel等都属于此类,他们拥有共同的父类Panel 二.内容控件:只能容纳一个其他控件或者布局控件作为他的内容。Window、Button等都属于此类,因为只能容......
  • 帝国cms记录用户点击的时间怎么看不了了
    帝国CMS记录用户点击的时间如果无法查看,可能是由于以下几个方面的原因:日志文件问题:查看日志文件:帝国CMS通过日志文件记录用户的点击时间,主要涉及的日志有 access.log、error.log 和 operation.log。这些日志文件中以时间戳开头的记录即代表用户点击的时间。日志文件丢失......
  • 基础组件:按钮
    Material组件库中提供了多种按钮组件如ElevatedButton、TextButton、OutlinedButton等,它们都是直接或间接对RawMaterialButton组件的包装定制,所以他们大多数属性都和RawMaterialButton一样。在介绍各个按钮时我们先介绍其默认外观,而按钮的外观大都可以通过属性来自定义,我们在后面......
  • 点按钮相机飞行到设备前观察
    效果如下:一、原理二、完整代码:1、html  <divclass="pos">    <divid="A"class="bu">设备A</div>    <divid="B"class="bu"style="margin-left:10px;">设备B</div>   ......
  • 海康威视WEBSDK3.3控件开发-分屏预览多个摄像头
    海康威视WEB3.3控件开发包V3.3下载得到海康威视的demo。按照说明文档启动项目。如果是公司内部,一般都是配置好了对应的WiFi,不需要启动NGINX,直接启动.html文件即可海康威视视频教程注意:很多需要海康平台支持,需要付费参考:在vue3中使用海康威视WEB3.3控件开发包V3.......