zoukankan      html  css  js  c++  java
  • 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('动画参数为空')
          }
          
        },
  • 相关阅读:
    sql 存储过程 in 的两种写法
    C# 开发Chrome内核浏览器(WebKit.net)
    IE6、IE7、IE8、Firefox兼容性
    360浏览器兼容模式 不能$.post (不是a 连接 onclick的问题!!)
    jquery树形表格实现方法
    C#递归累计到父行
    树形结构 DropDownList
    ASP.NET 防止重复提交提示层
    JavaScriptSerializer 时间格式化
    去标签获取网页内容
  • 原文地址:https://www.cnblogs.com/yc-c/p/13439957.html
Copyright © 2011-2022 走看看