zoukankan      html  css  js  c++  java
  • 使用scale等比例缩放图片

    功能需求:
    在下拉框中选择你所需要缩放的比例,
    选择好了之后,图片会按照你选择的比例进行缩放

    1==》如何获取select中option选中的值
    在select添加事件change 和双向绑定v-model

    <select @change="changeValue" v-model="myVal">
    <option value="1">1:1</option>
    <option value="1.5">1:1.5</option>
    </select>

    data中 myVal:"1"

    ps==>当myVal为1时,option显示1:1,当myVal为1。5时,option显示1:5,

    所以说明了 select中的v-model(value)值是1时,就会自动显示option中对应的值。

    console.log(this.myVal)

    2==》找到控制图片的节点,使用scale进行动态绑定
    let ele=document.getElementById("img")
    ele.style.transform="scale(1)";

      <div id="app">
          <select @change="changeValue" v-model="myVal">
            <option value="1">1:1</option>    
            <option value="1.5">1:1.5</option>
          </select>
          <br/>
          <br/>
         <img src="./01.jpg" id="img">
       </div>
      <script>
        new Vue({
          el: '#app',
            data() {
              return {
                myVal:"1",
                scaleSize:"",
                   
                      
              };
            },
    
          methods: {        
           changeValue(){
               let ele=document.getElementById("img");//获取节点
               console.log(this.myVal)
               if(this.myVal=="1"){
                   this.scaleSize=1;
                   ele.style.transform="scale(1)";
               }else if(this.myVal=="1.5"){
                   this.scaleSize=1.5;
                   ele.style.transform="scale(1.5)";
               }
           }
          },
        
        })
      </script>

  • 相关阅读:
    Hadoop源代码分析
    Java中如何把两个数组合并为一个
    数据库死锁的解决办法
    Java程序中解决数据库超时与死锁
    mysql 死锁检查
    JDBC事务和数据库事务嵌套的讨论 .
    嵌套事务和事务保存点的错误处理
    java string常见操作题
    java基本数据类型包装类
    java string
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/11960604.html
Copyright © 2011-2022 走看看