html怎么给图片加个叉,html+css 图片右上角加删除叉,图片删除
以上就是效果图。 右上角的图片可自己换图片,图片素材我就不放上来了,我就上个代码,挺简单的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怎么给图片加个叉,html+css 图片右上角加删除叉,图片删除相关推荐
- css b加粗怎么用,CSS去掉b加粗和strong加粗标签样式.doc
CSS去掉b加粗和strong加粗标签样式 DIVCSS5教大家如何使用DIV+CSS去掉html中b加粗和strong加粗样式 1.使用CSS样式属性单词: font-weight 2.语法 去掉对 ...
- html中图片等比例展示,纯 CSS,不用背景,实现图片等比例展示
最简单的等比例:div img { max-width:100%; max-height:100%; } 如上显示效果是:图片等比例缩放,不变形:图片所有区域都会显示. 但是,如上代码有可能会造成横向 ...
- 修改svg图片的颜色html,通过CSS改变svg image引入的图片颜色?
在html元素中通过background设置图片icon,然后通过css3的filter滤镜的drop-shadow 设置阴影来呈现这种改变图片颜色的效果.很不错的方法. 但是我现在的元素是在svg中 ...
- html图片如何摆在右侧,css里面,怎么让背景图片在最右边,且上下...
2016-07-08 00:39连亚玉 客户经理 水平居中: 1.单独文字垂直居中只需要设置CSS样式line-height属性即可. 2.文字与图片同排,在设置div高度同时再对此css样式的图片& ...
- flask加载网页时css美化效果加载不出来的解决方法
文章目录 前言 步骤 参考文章 前言 问题: 直接打开网页就有css的美化效果,运行flask出来后就没有,网上找了半天之后找到了解决方案,在此记录一下,方便以后查找. 环境: vscode.pyth ...
- html删除图片效果,html+css实现图片右上角加删除叉、图片删除按钮
这篇文章主要介绍了html+css 实现图片右上角加删除叉.图片删除按钮,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 为了纪录下,以后可能用到 ...
- html+css 图片右上角加删除叉,图片删除
为了纪录下,以后可能用到,有需要的道友也可以用用. 不BB,上效果图先 以上就是效果图. 右上角的图片可自己换图片,图片素材我就不放上来了,我就上个代码,挺简单的css和js,初学者应该也看得明白 & ...
- python训练好的图片验证_利用keras加载训练好的.H5文件,并实现预测图片
我就废话不多说了,直接上代码吧! import matplotlib matplotlib.use('Agg') import os from keras.models import load_mod ...
- Python语言学习:利用python获取当前/上级/上上级目录路径(获取路径下的最后叶目录的文件名、合并两个不同路径下图片文件名等目录/路径案例、正确加载图片路径)之详细攻略
Python语言学习:利用python获取当前/上级/上上级目录路径(获取路径下的最后叶目录的文件名.合并两个不同路径下图片文件名等目录/路径案例.正确加载图片路径)之详细攻略 目录 利用python ...
最新文章
- POJ 3468 A Simple Problem with Integers
- 基于Spark的机器学习实践 (三) - 实战环境搭建
- 关于前端性能优化问题,认识网页加载过程和防抖节流
- CentOS 7防火墙开启路由功能和开放特定端口
- lua能在stm32arm上运行吗_IOS App能在Mac运行!苹果这黑科技能撼动微软吗?
- careercup-链表 2.7
- SDOD: Real-time Segmenting and Detecting 3D Objects by Depth(实时3D检测与分割)
- Maven报错Please ensure you are using JDK 1.4 or above and not a JRE解决方法!
- 一文带你了解夜间灯光数据
- Centos7安装达梦(DM7)数据库
- swift plm物料管理模块中的变更管理介绍
- Java开发对接招行一网通支付功能的总结
- 实现Typora多端同步
- js 中的 this、that
- MPSK通信系统的Monte Carl仿真(matlab实现,附源码)
- 【运筹学】对偶理论 : 互补松弛性 ( 定理内容 | 定理证明 )
- iBeacon让互联网营销进入场景时代
- nginx使用ngx.req.get_body_data()获取不到请求体内容
- python代码画海绵宝宝步骤图解_简笔画教程 | 有一种回忆叫做海绵宝宝
- 数据挖掘与数据分析大致流程