使用js做创建图片及删除图片 若有什么不对或不完整的地方，请大家提出来，谢谢
首先我们要在<body>中创建一个按钮<button>来用作点击创建图片，在<button>中写一个点击事件（随便命名），
在创建一个<div>存放图片，在<div>中创建一个id（跟上面一样随便命名）
代码如下:
<button onclick="hehe()">创建图片</button>
<div id="imgsId"></div>
再写几个需要用到的样式：
我们先定义一个haol（随便定义的），里面transition:all 3s表示动画属性，所有都是3s,
代码如下：
.haol{
transition:all 3s;
}
再定义一个旋转（这点我是百度上面的）,语法是：@keyframes myfirst{ to{} from}
@keyframes myfirst{
to{
transform: rotate(0deg);
}
from{
transform: rotate(160deg); //旋转160度
}
}
定义一个透明度（与上相同）
@keyframes myfirst2{
to{
filter:alpha(Opacity=10); //opacity透明度,
opacity: 0.1;
}
from{
filter:alpha(Opacity=80);
opacity: 1;
}
}
定义一个over-out：animation动画属性
.over-out{
animation: myfirst 1s;
}
定义一个over-out1：animation动画属性 .over-out1{
animation: myfirst2 2s;
}
好，准备工作做完之后，我们来写js部分，
首先，我们不能忘记写开头：
<script language="JavaScript"></script>
然后在这中间我们来写具体部分:
我们可以用"$"来获取指定网页元素的函数，使用非常之频繁，
代码如下：
function $(oId){
var obj=document.getElementById(oId);
return obj;
}
从上我们可以看出，在function中使用$定义一个参数为oId(随便定义)
然后在定义var 来使用document.getElementById来定义id。
因为js为弱性语言,它是依此解析，所以在前面必须写window.event,进行兼容
代码如下：
window.event = function(){}
现在我们写创建图片的js部分，先创建一个function setimge(){},然后在里面写内容
function setimge(){
先定义数组来存放图片,我们可以用Array();如
var tupian = obj.Array();
然后再用tupian.push("n1.jpg");存储图片，这里我存放了五张图片
tupian.push("n2.jpg");
tupian.push("n3.jpg");
tupian.push("n4.jpg");
tupian.push("n5.jpg");
可以根据情况而定；
我们再用for循环
for(var i = 0;i<tupian.length;i++)
tupian.length是它的图片，
再定义一个var来创建img;
var imgObj = document.createElement("img");
创建一个var来装tupian[i],
var imgss = tupian[i];
在把scr赋值给imgss,
imgObj.src = imgss;
然后把function定义的addClass添加进来(这个后面会讲到,现在先写在这里)
addClass(imgsObj,"haol");
我们可以用定义的imgObj来给一些值(在这里先给它赋初值0px）：
imgObj.style. imgsObj.style.width = "0px";
imgObj.style.marginLeft = "0px";
在使用$符里面写<div>中写的id值，appendChild是添加子元素
$("imgsId").appendChild(imgsObj);
}
其实图片在点击按钮之前已经创建，只是我们看不见，因为我刚刚赋值为0px；
现在我们function中写button中的onclick="hehe()",
function hehe(){
先定义一个var 来获取img
var tupian = $("imgsId").getElementsByTagName("img");
再使用for循环
for(var i = 0;i<tupian.length;i++)
创建一个var来装tupian[i],
var imgss = tupian[i我们可以赋一些值
imgsObj.style.width = "200px";
imgsObj.style.marginLeft = "20px";
现在点击创建图片按钮，我们只是将图片放大而已。
然后我们把光标移到图片上，让图片旋转，点击让它有提示框进行删除，删除时，图片是慢慢消失。
首先写光标移到图片上，onmouseover就是光标移到图片上；
imgsObj.onmouseover = function(){
addClass(this,"over-out"); // 、this表示上层中的imgsObj
}
然后是光标移出图片上：
imgsObj.onmouseout = function(){
removeClass(this,"over-out");
}
做点击图片删除：
imgsObj.onclick = function(){
var ev=window.event;
var obj = ev.currentTarget;
removeimgs(obj);
}
现在我们来做上面提到的addClass(),传参数
首先定义function addClass(obj,cn){
定义一个cName获取obj的classname;
然后是用if判断cName的长度是否为0;
if(cNmae.length==0){
是的话，obj.cName= cn,
}else{
不是的话,obj.cName = (" "+cn);
}
}
然后是移除function.removeClass(obj , cn){ //跟上面一样，先给参数，
定义一个cs获取obj的classname;
cs = cs.split(); //split拆分字符串
for (var i = 0; i < cs.length; i++) { //for循环
if (cs[i]==cn) { 判断cs[i] 是不是等于cn
cs.splice(i, 1); //splice（i,1）表示删除i中第1个内容
}
}
obj.className = cs.join(" ");//拆分完之后再重新连接
}
}
现在做删除图片了
function removeimgs(obj,cnn){
var f = window.confirm('是否要删除该图片'); //confirm提示框
if(f){
addClass(obj,"over-out1");
setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式
setTimeout(function(){
西安要找出父类，然后让父类进行删除
obj.parentNode.removeChild(obj);
},2000);
}else{
alert("取消删除");
}
}
程序基本做完了，完整代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
c
</style>
<script language="JavaScript">
function $(oId){
var obj=document.getElementById(oId);
return obj;
}
function addClass(obj, cn){
var cName = obj.className;
if(cName.length==0){
obj.className = cn;
}else{
obj.className+=(" "+cn);
}
}
function removeClass(obj, cn) {
var cs = obj.className;
cs = cs.split(" ");
for (var i = 0; i < cs.length; i++) {
if (cs[i]==cn) {
cs.splice(i, 1);
}
}
obj.className = cs.join(" ");
}
function removeimgs(obj,cnn){
var f = window.confirm('是否要删除该图片');
if(f){
addClass(obj,"over-out1");
setTimeout(function(){
obj.parentNode.removeChild(obj);
},2000);
}else{
alert("取消删除");
}
}
function setimgs(){
var tupian = Array();
tupian.push("n1.jpg");
tupian.push("n2.jpg");
tupian.push("n3.jpg");
tupian.push("n4.jpg");
tupian.push("n5.jpg");
for(var i = 0;i<tupian.length;i++){
var imgsObj = document.createElement("img");
var imgss = tupian[i];
imgsObj.src = imgss;
addClass(imgsObj,"haol");
imgsObj.style.width = "0px";
imgsObj.style.marginLeft = "0px";
$("imgsId").appendChild(imgsObj);
}
}
window.onload = function(){
setimgs();
}
function hehe(){
var tupian = $("imgsId").getElementsByTagName("img");
for(var i = 0;i<tupian.length;i++){
var imgsObj = tupian[i];
imgsObj.style.width = "200px";
imgsObj.style.marginLeft = "20px";
imgsObj.onmouseover = function(){
addClass(this,"over-out");
}
imgsObj.onmouseout = function(){
removeClass(this,"over-out");
}
imgsObj.onclick = function(){
var ev=window.event;
var obj = ev.currentTarget;
removeimgs(obj);
}
}
}
</script>
</head>
<body>
<button onclick="hehe()">创建图片</button>
<div id="imgsId"></div>
</body>
</html
使用js做创建图片及删除图片 若有什么不对或不完整的地方，请大家提出来，谢谢的更多相关文章
- H5实现查看图片和删除图片的效果
在最近的项目中,H5需要实现查看图片和删除图片的效果,总结如下: 一.查看图片 查看图片使用weui的gallery.首先添加gallery的html,然后隐藏. <div class=&quo ...
- js实现上传前删除指定图片
"上传之前"移除选错图片代码: 此处效果为:点击需要删除的图片,确认删除就可以了.
- spring mvc 图片上传,图片压缩、跨域解决、 按天生成文件夹 ,删除，限制为图片代码等相关配置
spring mvc 图片上传,跨域解决 按天生成文件夹 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ ...
- python 指定日期图片文件删除
手机使用python操作图片文件 起因 前几天去国图拍了一本书,一本心理学方面的书,也许你问我为什么不去买一本,或者去网上找pdf. 其实吧,关于心理学方面的书可以说在市面上一抓就是一堆,至于拍这本书 ...
- 使用GitHub-Pages创建博客和图片上传问题解决
title: 使用GitHub Pages创建博客和图片上传问题解决 date: 2017-10-22 20:44:11 tags: IT 技术 toc: true 搭建博客 博客的搭建过程完全参照小 ...
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- KindEditor的简单使用，以及上传图片预览图片，用户删除图片后的数据处理（重点），以及 BeautifulSoup，shutil两模块了解
KindEditor的简单了解 http://www.cnblogs.com/wupeiqi/articles/6307554.html 简单使用: <div class="comm& ...
- 使用HTML5 canvas做地图（3）图片加载平移放大缩小
终于开始可以写代码了,手都开始痒了.这里的代码仅仅是在chrome检测过,我可以肯定的是IE10以下浏览器是行不通,我一直在考虑,是不是使用IE禁止看我的篇博客,就是这群使用IE的人,给我加了很多工作 ...
- thinkphp5项目--企业单车网站（八）（文章板块要点）（删除图片）
thinkphp5项目--企业单车网站(八)(文章板块要点)(删除图片) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise ...
随机推荐
- C++中模板template <typename T>
最近在看C++的源码,遇到了不少问题,一点一点进行补充. 首先就是遇到template <typename Dtype>. 网上解释的非常多,觉得比较啰嗦,其实就是一个类型模板. 比如我们 ...
- 还原NuGet程序包
官网:https://msdn.microsoft.com/zh-cn/magazine/hh547106.aspx 在获取团队中的项目或者下载他人的项目Demo后,运行项目有时会提示某些dll找不到 ...
- jQuery添加删除节点例子第十节"员工增删表"
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- T-SQL 删除重复数据SQL
WITH cte AS ( SELECT roleid,permissionid, row_number() OVER(PARTITION BY roleid,permissionid ...
- IDEA搭建SSMM框架（详细过程）
IDEA搭建SSMM框架(详细过程) 相关环境 Intellij IDEA Ultimate Tomcat JDK MySql 5.6(win32/win64) Maven (可使用Intellij ...
- 使用 ConfigSource 特性 拆分 Web.config 文件
一个大项目里可能会有非常多个配置参数,有.Net自己支持的配置(比如WCF,AppSettings),还有一部分是自定义的配置(比如继承自ConfigurationSection和Configurat ...
- C# 自定义样式实现菜单和工具栏的分割线
在做WinForm界面布局时,菜单和工具栏必不可少!但是MenuStrip和ToolStrip不能够对边框的样式直接设置,如果想实现菜单和工具栏之间的分割线就不容易实现:今天查阅了一下msdn找到了一 ...
- 初识Redux-Saga
Redus-saga是一个redux的中间件,主要用来简便而优雅的处理redux应用里的副作用(side effect相对于pure function这类概念而言的).它之所以可以做到这一点主要是使用 ...
- Nodejs mongodb 管理组件adminmongodb
强大的 nodejs的mongodb管理工具,强大到即下即用: 安装需求: 1.git命令获取组件包,git clone https://github.com/mrvautin/adminMongo. ...
- CLR类型设计之泛型（二）
在上一篇文章中,介绍了什么是泛型,以及泛型和非泛型的区别,这篇文章主要讲一些泛型的高级用法,泛型方法,泛型接口和泛型委托,协变和逆变泛型类型参数和约束性,泛型的高级用法在平时的业务中用的不多,多用于封 ...