在图片的右上角加一个复选框

最新推荐文章于 2023-11-17 14:36:14 发布
最新推荐文章于 2023-11-17 14:36:14 发布
阅读量2.5k 收藏 2
点赞数

源文章：https://blog.csdn.net/qq_39098505/article/details/82113189

效果图：

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>测试</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
  </head>
  
  <body>
  <div class="ztree">
     <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div class="main" style="position:relative;">
    <div class="img">
        <img alt="图片名称" src="plug-in/image/Desert.jpg" style="width:100px;height:100px">
    </div>
    <div class="checkbox" style="position:absolute;top:0;right:0;z-index:1000;padding-right:33px;">
       <input id="box" type="checkbox" name="box">
    </div>
    </div>
    <div class="main" style="position:relative;">
    <div class="img">
        <img alt="图片名称" src="plug-in/image/Desert.jpg" style="width:100px;height:100px">
    </div>
    <div class="checkbox" style="position:absolute;top:0;right:0;z-index:1000;padding-right:33px;">
       <input id="box" type="checkbox" name="box">
    </div>
    </div>
    <div class="main" style="position:relative;">
    <div class="img">
        <img alt="图片名称" src="plug-in/image/Desert.jpg" style="width:100px;height:100px">
    </div>
    <div class="checkbox" style="position:absolute;top:0;right:0;z-index:1000;padding-right:33px;">
       <input id="box" type="checkbox" name="box">
    </div>
    </div>
  </body>
</html>

qzWsong
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery 用image图片自定义checkbox 并切换状态
我爱特雷西
02-07 2296
html中，input标签一般和lable标签一起使用，不用系统原生的checkbox，用自己的图片来自定义一个checkbox html代码： label> img src="../images/ic_check_select.png" id="checkimg" onclick="checkclick()"/> label> input type="check
jQuery实现获取选中复选框的值实例详解
12-29
我们可以在每个列表项后面加一个删除按钮，把列表项的相关参数（如 id）post到后台进行删除。当然如果你每次只要删除一两条数据这样子做并没有什么问题，但是如果你需要一次性删 除100条，你还去一条 条的删除吗？...
vue运用图片形式，实现复选框效果
weixin_44378416的博客
03-30 958
多个图例切换，要运用object 不要用数组，这是vue的坑 <div v-for="(item,index) in plans" @click="changemap1(index)"> <img v-if="!selectList[index]" src="../../assets/img/map/select.png" width="30px" height="30px"/> <img v-else="selectL.
Android开发：实现带图片和checkbox的listview
stephen830
09-24 90
Android开发：实现带图片和checkbox的listview   转载自 http://mobile.51cto.com/android-254823.htm   项目要用到一个listview，要求是可以显示图片，后面还有有复选框。 先新建一个MyAdapter类，继承自BaseAdapter。在MyAdapter中实现对数据的绑定，我这儿由于是测试的，所以把数据写死了。...
vue2+elementui 实现图片上传组件保存后图片回显，复选框回显
qq_38599266的博客
03-11 2304
组件代码 v-model="opinionForm.imgs" 是表单数据， :file-list="files" files代表当前组件已经上传的图片列表， :auto-upload="true" 需要设置自动提交图片回显是保存后重新打开页面后，将后端查询出的图片地址重新赋给files属性，此处需要注意files属性脱离表单对象。就可以实现图片回显。
vue 用2张图片写复选框。选中状态图片跟未选择状态图片加提示
mslmhl的博客
08-12 696
vue 用2张图片写复选框。选中状态图片跟未选择状态图片加提示
jquery.alert 弹出式复选框实现代码
01-19
//jQuery Alert Dialogs Plugin Version 1.0 //插件下载地址：http://abeautifulsite.net/notebook/87 自身的原方法为： 代码如下:// Usage: // ...新加一个multicheckbox 的公共方法: // Public methods multicheckb
javascript复选框实现批量选择
02-16
1. 在每条记录前面加一个复选框，该复选框的值为“id|username”（示例），即选中此复选框会同时传两个值，中间用“|”隔开。 2. 在列表下方放置一个“全选/全不选”复选框，当选中“全选/全不选”复选框后，列表中...
Android开发Popwindow仿微信右上角下拉菜单实例代码
01-05
先给大家看下效果图： MenuPopwindow: ... import android.app.Activity; import android.content.Context; import android.graphics.drawable.ColorDrawable;...import android.view.LayoutInflater;...
vc在文件夹浏览对话框上加一个新建文件夹按钮
04-11
"vc在文件夹浏览对话框上加一个新建文件夹按钮"这个主题就是关于如何扩展Windows API提供的标准文件夹浏览对话框，添加一个额外的功能——创建新文件夹。下面将详细介绍实现这一功能的关键步骤和知识点。 首先，...
微信小程序怎么在照片右上角加勾选框
weixin_42592399的博客
01-12 809
在微信小程序中，可以使用组件 "checkbox" 来实现照片右上角的勾选框。可以在 wxml 文件中使用 <checkbox> 标签来渲染勾选框，并在相应的 wxss 文件中对勾选框的样式进行调整。在 JavaScript 中，可以使用 data 和 methods 来控制勾选框的状态和点击事件。详细的实现方法还需要根据具体的需求和页面布局来进行调整 ...
html设置复选框图片,css实现图片右上角添加复选框的方法
weixin_34870633的博客
06-03 951
css实现图片右上角添加复选框的方法发布时间：2020-06-15 10:59:23来源：亿速云阅读：221作者：Leah这篇文章给大家分享的是css实现图片右上角添加复选框的方法，相信大部分人都还没学会这个技能，为了让大家学会，给大家总结了以下内容，话不多说，一起往下看吧。页面如下：String path = request.getContextPath();String basePath = ...
【选中时样式变化】el-checkbox中选中时增加边框样式
x781054643的博客
05-17 666
【项目实践时】【选中时样式变化】el-checkbox中选中时增加边框样式。
css给图片右上角添加复选框
qq_39098505的博客
08-27 4238
效果图： 页面如下：  &lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerN...
VUE图片添加角标，图片右上角或左上角添加标识
weixin_45710811的博客
07-27 6197
vue图片添加角标，图片左上角或右上角添加标识
点击表格中文字，图片中相关文字进行红框标注
茶荼
09-29 1001
需求：后端返回图片中所出现的文字（文字在图片中的坐标，文字在图片中的高度和宽度）以及该图片，用户点击该文字，图片中相应的文字进行红框标注。
element-ui之el-image-viewer(图片查看器)及单击，双击事件冲突解决
roongyan92的博客
12-17 8551
有时候我们的需求和组件提供的不一致，就需要自己封装组件，有的功能实现起来很麻烦，产品要做一个双击图片打开预览的功能，原生js实现有点费劲。我们看一下Image的源码，发现大图预览是一个小组件image-viewer，打开看看它的props，如下 props: { urlList: { type: Array, default: () => [] }...
vue+element 图片右上角添加删除小×、按钮预览图片
XXX51129的博客
10-09 4675
图片右上角添加删除小×、按钮预览图片 这个问题实际就是一个思维方式的问题，我最开始思考的就很复杂，后来我同事给出的解决方法就好。在判断有图片的时候，在图片的右上角加上一个小×的图片，在这个图片上加方法，点击就把图片清空。所以有的时候，一件事情不能想的太复杂。
在 el-table 中嵌入 el-checkbox el-input el-upload 多组件，实现复杂业务场景
最新发布
web-Danli的博客
11-17 1627
表格“属性”列由 多选框checkbox、输入框input、 图片上传upload 等组件组成，从代码可看出 checkbox-group 包裹 input等组件，所以当在输入框输入或点击上传图片等操作时，都会触发勾选/取消勾选多选框。在实现的过程中，我还碰到一个输入框不能输入的问题，我操作输入之后，没有动静，再点击勾选操作时就可以正确显示出来了。时，你会发现，操作点击时不会触发弹出选择文件窗口，这是因为加了阻止冒泡后没有触发到选择文件的操作，这就需要我们自己在事件处理中写逻辑去触发。
css在轮播图的图片上加一个悬浮固定图片怎么操作
05-24
你可以使用CSS的position属性来实现在轮播图上添加悬浮固定图片的效果。首先，确保你的轮播图和悬浮固定图片都被包裹在一个共同的容器中。然后，使用CSS选择器和position属性来将悬浮固定图片定位在轮播图上方。 下面是一个示例代码： HTML: ``` <div class="slider-container"> <!-- 轮播图代码 --> <div class="slider"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> </div> <!-- 悬浮固定图片代码 --> <div class="fixed-image"> <img src="fixed-image.jpg"> </div> </div> ``` CSS: ``` .slider-container { position: relative; } .fixed-image { position: absolute; top: 0; left: 0; } ``` 在上面的代码中，我们使用了CSS的position属性来将悬浮固定图片定位在轮播图上方。通过设置`.slider-container`容器的position属性为relative，我们可以让其成为定位上下文，也就是让悬浮固定图片相对于这个容器进行定位。接着，我们设置`.fixed-image`容器的position属性为absolute，将其脱离文档流并且相对于`.slider-container`容器进行定位。最后，我们将`.fixed-image`容器的top和left属性设置为0，将图片定位在轮播图的左上角。 你可以根据自己的实际情况，调整定位的位置和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值