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>
  • 相关阅读:
    db2死锁解决
    Cannot create JDBC driver of class '' for connect URL 'null'问题解决
    转 maven 教程一 入门 (http://wentao365.iteye.com/blog/903396)
    db2用户密码不合法
    oracle死锁处理方法
    myeclipse修改jsp页面无反应
    oracle函数方法(虚拟表操作)
    jQuery css选择器 截图
    uwsgi和nginx 使用和配置
    nginx+uwsgi+django部署各模块作用
  • 原文地址:https://www.cnblogs.com/wsj1/p/13816879.html
Copyright © 2011-2022 走看看