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>
  • 相关阅读:
    C#基础知识委托与泛型(转载)
    C.消息队列(转载)
    可编辑的 HTML JavaScript 表格控件 DataGrid
    Asp无组件上传进度条解决方案
    A lot of Javascript tips
    资料只看看,不能copy/paste。
    Converting Numbers to Strings
    浅析Google技术底蕴
    ASP.NET makes uploading files from the client to the server a snap(UploadInterface.PostedFile.SaveAs)
    IT IS an IMPORTANT String for Input TYPE=File Field enctype="multipart/formdata"
  • 原文地址:https://www.cnblogs.com/wsj1/p/13816879.html
Copyright © 2011-2022 走看看