html删除图片效果,html+css实现图片右上角加删除叉、图片删除按钮
这篇文章主要介绍了html+css 实现图片右上角加删除叉、图片删除按钮,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
为了纪录下,以后可能用到,有需要的道友也可以用用。
不BB,上效果图先
以上就是效果图。 右上角的图片可自己换图片,图片素材我就不放上来了,我就上个代码,挺简单的css和js,初学者应该也看得明白
无标题文档
.divX
{
z-index:200;
-moz-border-radius:20px;
-webkit-border-radius:20px;
line-height:10px;
text-align:center;
font-weight:bold;
cursor:pointer;
font-size:10px;
display: none;
}
function addFile(ths) {
var objUrl = getObjectURL(ths.files[0]);
var left = $('#file_img').position().left;
var top = $('#file_img').position().top;
$('#img_zindex_div_1').css({position: "absolute", left: left + 75, top: top + 10, display: "block" });
$('#file_img').attr("src", objUrl);
}
function del() {
alert("删除");
}
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
搞定。收工了。复制代码,替换下图片素材就直接能用了
下班。走人
补充。由于拿left都是0
换种方式获取
var objUrl = getObjectURL(ths.files[0]);
var left = $('#file_img').offset().left;
var top = $('#file_img').offset().top;
// left为默认图的最左侧距离, 添加后的图片可根据 默认图的宽度 - 删除层图片的宽度(即:当前我默认图的宽度为75,删除层的图片宽度为16, left = 75 - 16, 位置就能到图片的最右侧了! top也是同样道理)
$('#img_zindex_div_1').css({position: "absolute", left: left + 59, top: top - 5, display: "block" });
总结
到此这篇关于html+css 实现图片右上角加删除叉、图片删除按钮的文章就介绍到这了,更多相关html图片右上角加上删除内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
来源:脚本之家
链接:https://www.jb51.net/web/724504.html
申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!
html删除图片效果,html+css实现图片右上角加删除叉、图片删除按钮相关推荐
- php怎么设置文字环绕图片,CSS_CSS实现文字环绕图片效果,CSS实现文字环绕图片效果
文 - phpStudy...
CSS实现文字环绕图片效果 CSS实现文字环绕图片效果 文字环绕图片,在Word里只要click一下右键,调一下属性就可以了.但在HTML文档里就没有直接属性了.因此我们可以借助CSS来实现这一效果. ...
- qt快速加载图片_Qt实用技巧:使用Qt加载超大图片的耗时测试
需求 某机器人项目中,需要加载构建的地图,此处仅测试直接加载图片的时间. 相关博客 测试代码 QString path; path = "./map/1.png"; QFileIn ...
- html 中用canvas加载图片,【实例】使用canvas缓缓加载一个图片到web页面中
由于要做web前端设计,用到这个效果,弄了一个晚上,总算是弄出来了 效果 从上到下缓缓载入一个图片 思路 获取一个空白canvas,使用drawImage方法画出整个图像获取这个图像中的每一行的数据清 ...
- python爬取动态网页图片_python爬虫之爬取动态加载的图片_百度
运行坏境 python3.x 选择目标--百度 当我们在使用右键查看网页源码时,出来的却是一大堆JavaScript代码,并没有图片的链接等信息 因为它是一个动态页面嘛.它的网页原始数据其实是没有这个 ...
- html彩虹效果文字,CSS 实现彩虹条加载动画特效
利用css的delay延迟以及旋转动画效果实现彩虹条加载动画,纯css没有一行js代码,喜欢的搞起来. HTML结构: CSS结构 body { background-color:#000; } .b ...
- 【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
- html如何实现立体效果,纯css实现立体摆放图片效果的示例代码
1.元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举个栗 ...
- html如何实现立体效果,纯css实现立体摆放图片效果的实例代码
1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
- php imagick手册,PHP中使用Imagick实现各种图片效果实例
这篇文章主要介绍了PHP中使用Imagick实现各种图片效果实例,本文讲解了偏置图像.改变图片大 imagick是一个功能强大的图像处理库. 说是翻译 其实就是简要介绍imagick 的主要功能的或者 ...
最新文章
- Cocos2d入门--3--向量的应用
- 如何阅读一本书 pdf_如何2个小时内快速阅读一本书?
- 看生物信息学如何聚焦特定表型,探索分子机制,促进临床转化
- asp.net控件全部清空、全部启用、全部禁用方法
- C++11中thread库join和detach的区别
- CSS:display和visibility隐藏的区别
- 原生js实现的日期选择插件
- 开发部程序员绩效考核办法
- 【高数】【本科笔记】【第七章 微分方程】【7.2 可分离变量的微分方程】
- react中引入echarts中国地图
- 兵棋---棋盘绘制算法(六边形阵列算法)
- 微信小程序:云开发表情包制作源码
- 现实中的项目范围变更
- iOS “此证书由未知颁发机构签名“
- 收集到的cmd基本命令快捷打开方式
- Protected or Private?
- 【转摘】未来财务会是什么样子?
- 你好,C++(6)2.3 C++兵器谱
- 2019 年 Vue 高手特训营
- java:简单的点单系统
热门文章
- python print r_Python 语句 print(r\nGood) 的运行结果是 ( ) 。_学小易找答案
- golang学习之negroni对于第三方中间件的使用分析
- excel锁定单元格不能修改_Excel如何保护特定的数据不被更改?
- (四)Spring核心思想 - IOC与DI
- 阿里2017实习一面二面
- 解决电脑CPU占用率高问题
- 【频率计】基于FPGA的频率计设计
- 【顶】(与同事合作的快乐)技术人员也需要先学会做人,再学会做事,再是能成事,最后是成名得利
- Network Stack Specialization for Performance
- android x5 webview报错,appium 混合 APP,x5 内核,webview 切换报错