zoukankan      html  css  js  c++  java
  • js 旋转

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>

        div{
            200px;
    height: 200px;
    border:1px solid #adadad;
    transition:all 0.1s;
    background:red;
    background-size:cover;
    margin:50px auto;
        }
    </style>
    <body>
        <button id='btn'>
            按钮
        </button>
        <div id ='div'>
            1
        </div>
    </body>
    </html>
    <script>

    var flag = true 
    var time
    var angel=0;
    setCss3(div,{transform:"rotate(0deg)","transform-origin":"50% 50%"})
        btn.onclick=function(){

            //setCss3(div,{transform:"rotate(10deg)","transform-origin":"50% 50%"})
            
        if(flag){
           
             time =  setInterval(function(){
            angel+=8;
            setCss3(div,{transform:"rotate("+angel+"deg)","transform-origin":"50% 50%"})
            },30)
            flag= false
        }else{
            clearInterval(time)
            flag= true
        }
          
     
        }


    function setCss3(obj,objAttr){
     //循环属性对象
     for(var i in objAttr){
     var newi=i;
     //判断是否存在transform-origin这样格式的属性
     if(newi.indexOf("-")>0){
     var num=newi.indexOf("-");
     newi=newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase());
     }
     //考虑到css3的兼容性问题,所以这些属性都必须加前缀才行
     obj.style[newi]=objAttr[i];
     newi=newi.replace(newi.charAt(0),newi.charAt(0).toUpperCase());
     obj.style[newi]=objAttr[i];
     obj.style["webkit"+newi]=objAttr[i];
     obj.style["moz"+newi]=objAttr[i];
     obj.style["o"+newi]=objAttr[i];
     obj.style["ms"+newi]=objAttr[i];
     }
     }

    </script>
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>

        div{
            200px;
    height: 200px;
    border:1px solid #adadad;
    transition:all 0.1s;
    background:red;
    background-size:cover;
    margin:50px auto;
        }
    </style>
    <body>
        <button id='btn'>
            按钮
        </button>
        <div id ='div'>
            1
        </div>
    </body>
    </html>
    <script>

    var flag = true 
    var time
    var angel=0;
    setCss3(div,{transform:"rotate(0deg)","transform-origin":"50% 50%"})
        btn.onclick=function(){

            //setCss3(div,{transform:"rotate(10deg)","transform-origin":"50% 50%"})
            
        if(flag){
           
             time =  setInterval(function(){
            angel+=8;
            setCss3(div,{transform:"rotate("+angel+"deg)","transform-origin":"50% 50%"})
            },30)
            flag= false
        }else{
            clearInterval(time)
            flag= true
        }
          
     
        }


    function setCss3(obj,objAttr){
     //循环属性对象
     for(var i in objAttr){
     var newi=i;
     //判断是否存在transform-origin这样格式的属性
     if(newi.indexOf("-")>0){
     var num=newi.indexOf("-");
     newi=newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase());
     }
     //考虑到css3的兼容性问题,所以这些属性都必须加前缀才行
     obj.style[newi]=objAttr[i];
     newi=newi.replace(newi.charAt(0),newi.charAt(0).toUpperCase());
     obj.style[newi]=objAttr[i];
     obj.style["webkit"+newi]=objAttr[i];
     obj.style["moz"+newi]=objAttr[i];
     obj.style["o"+newi]=objAttr[i];
     obj.style["ms"+newi]=objAttr[i];
     }
     }

    </script>
  • 相关阅读:
    Linux ansible 常用模块二
    Linux之ansible 常用模块
    flask websocket实现用例
    flask--上下文原理
    python Django
    python 并发编程 锁 / 信号量 / 事件 / 队列(进程间通信(IPC)) /生产者消费者模式
    并发编程 process 模块的方法及运用 僵尸与孤儿
    python 并发编程 操作系统 进程 并发.并行 及 同步/异步,阻塞/非阻塞
    python 网络编程粘包解决方案2 + ftp上传 + socketserver
    第一节 机器学习基础
  • 原文地址:https://www.cnblogs.com/wsj1/p/13816879.html
Copyright © 2011-2022 走看看