JavaScript 原生控制元素添加删除
参考:
https://blog.csdn.net/leijie0322/article/details/80664554
https://www.cnblogs.com/jpfss/p/9106209.html
需求是要求在图片上添加一个动画效果,可以位置、颜色、大小等参数,
1、在原有的图片上增加一个动画层、
2、动态更换动画参数
3、删除之前加载的动画,更新动画。
<div v-else @mousedown="move" @touchstart="phonetouchstart" @touchmove="phonetouchmove" @touchend="phonetouchend" align="justify" class="img3dmodels" > <img id="floormodels" :src="img_url" /> <div id="animation_div"></div> //这里就是动画层了 </div>
添加div
setanimationparameter(op, parameter) { // 创建动画var divs = document.createElement("div") // 创建div var cass = document.createAttribute("class"); //创建class定义 cass.value = "animation"; //添加class divs.setAttributeNode(cass) //div绑定class var style = document.createAttribute("style"); // 创建style divs.setAttributeNode(style); // 绑定style divs.style.width = parameter.w; divs.style.height = parameter.h; divs.style.left = parameter.x; divs.style.top = parameter.y; divs.style.backgroundColor = parameter.color; op.appendChild(divs) // 添加到动画层 },
清空div
removeanimation(){ //清空动画、清空动画层内所有的元素 let op = document.getElementById("animation_div"); op.innerHTML ='' },
执行代码
setanimation(parameter,imgIndex) { let op = document.getElementById("animation_div"); this.removeanimation() // 楼栋名称、底图、位置、大小、形状、显示隐藏 // parameter : 动画参数 // imgIndex : 展示底图名称 // console.log(parameter) this.img_url = `${this.imgpwd}${this.filename}${this.prefix}${imgIndex}.png`; if(parameter){ if (parameter.length){ for (let index = 0; index < parameter.length; index++) { const element = parameter[index]; this.setanimationparameter(op,element); } }else{ this.setanimationparameter(op,parameter); } console.log("更换动画"); }else{ console.log('动画参数为空') } },
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步