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('动画参数为空')

      }

    },

巴特西

JavaScript 原生控制元素添加删除

最新文章

热门文章