html+css 实现图片右上角加删除叉、图片删除按钮

所属分类: HTML/Xhtml / 网页制作 阅读数: 751
收藏 0 赞 0 分享

为了纪录下,以后可能用到,有需要的道友也可以用用。

不BB,上效果图先



 

以上就是效果图。 右上角的图片可自己换图片,图片素材我就不放上来了,我就上个代码,挺简单的css和js,初学者应该也看得明白

</pre><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.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;
}
</style></head> <body><form id="form" style="margin-top:20px;">
                <div id="img_div_1">
            <input type="file" id="file_input" οnchange="addFile(this);" style="display:none"
  />
            <div style="position: relative;">
            <img id="file_img" src="add_img.png" width="75" οnclick="file_input.click();" height="65" />
            </div>
            <div class="divX" id="img_zindex_div_1" οnclick="del()">
            <img src="no.png" width="16" height="16" />
            </div>
        </div>
        </form></body><script src="jquery-1.7.2.js" type="text/javascript"></script><script type="text/javascript">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) {
 // basicurl = window.createObjectURL(file) ;
}
 else if (window.URL!=undefined) {
 // mozilla(firefox)url = window.URL.createObjectURL(file) ;
}
 else if (window.webkitURL!=undefined) {
 // webkit or chromeurl = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script></html>

搞定。收工了。复制代码,替换下图片素材就直接能用了

下班。走人

------------------------------------------------------------------------------------------- 华丽分割 ---------------------------------------------------------------------------------------------------------

补充。由于拿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图片右上角加上删除内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

更多精彩内容其他人还在看

用标准dl,dt,dd标签抛弃table列表

现在,越来越多的前端开发er们开始使用xHTML+CSS替代最初的table布局完成网页的整体布局,不但让网站降低了开发和维护的成本,而且代码也更语义化了。但是,并不是说table从此消失了,它仍然被很多人用来作为网页中数据表现的必需品,比如个人信息数据列表等。事实上,使用HTM... 查看详情
收藏 0 赞 0 分享

HTML网页中的URL表示方式

在HTML中,常见的URL有多种表示方式: 相对URL: 复制代码代码如下: example.php demo/example.php ./example.php ../../example.php /example.php 绝对URL: 复制代码代码如下: http://jb5... 查看详情
收藏 0 赞 0 分享

Web页面 自定义选择框Select

select下拉列表表单可能大家都很熟悉,不过默认的下拉列表表单往往会让一些网站觉得丑陋,同时用CSS也很难调整select的样式。因此许多网站位了做出更符合网站风格的select下拉表单,往往会用JS来模拟这种效果。比如我们很熟悉的土豆网,淘宝商城和亚马逊都是用JS做的下拉列表... 查看详情
收藏 0 赞 0 分享

html 标签ID可以是变量

<table id=" <%=var1%>">,调用的时候必须用var1的实际值了 JS里面也是一样 document.getElementById(" <? echo $blogid; ?>"); 具体... 查看详情
收藏 0 赞 0 分享

iframe 自适应大小实现代码

页面域关系: 主页面a.html所属域A:www.jb51.net 被iframe的页面b.html所属域B:www.jb51.cn,假设地址:http://www.jb51.cn/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.htm... 查看详情
收藏 0 赞 0 分享

40多个漂亮的网页表单设计实例

网页表单是访问者与网站拥有者主要的沟通途径。返馈总是重要的,这就是我们为什么确保网页表单容易理解和使用起来比较直观的原因,尽管如此,甚至在形式设计中它也担当创意中的有效部分。网页表单并非都是乏味的,使用css或flash,你能确保它们具有吸引力且有效。要注意,你需要提出一些独特且... 查看详情
收藏 0 赞 0 分享

HTML减肥 精简HTML标记制作网页

HTML 4HTML (非XHTML),MIME type 为 text/html ,允许省略一些标签。通过 HTML 4 DTD,你可以省略以下标签(那些所谓可避免的元素,这里用删除线加以标记)</area></base><body><... 查看详情
收藏 0 赞 0 分享

HTML网页制作教程 谨慎使用iframe标记

使用 iframe 可以轻易的调用其他网站的页面,但应谨慎使用。它比创建其他 DOM 元素(包括 style 和 script)多耗费数十甚至数百倍的性能。增加100个不同元素的时间对比显示 iframe 是多么耗费性能: 使用 iframe 的页面通常没有这么多 if... 查看详情
收藏 0 赞 0 分享

HTML 网页头部代码全清楚

以下所有代码全是在<head>...</head>之间,具体内容有:1,<title>…</title>标题元素,帮助用户更好识别文件,有且只有一个。当作为首页或收藏时做文件名。2,<link>&helli... 查看详情
收藏 0 赞 0 分享

HTML 5 Reset Stylesheet

这份css reset是在Eric Meyers的 CSS reset基础上修改出来的,特别针对HTML5调整了相应标签的初始化样式。 /* html5doctor.com Reset Stylesheet v1.4 2009-07-27 Author: Richard Clar... 查看详情
收藏 0 赞 0 分享
查看更多