zoukankan      html  css  js  c++  java
  • js完美多物体运动框架(缓冲运动)

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2 <html xmlns="http://www.w3.org/1999/xhtml">
      3 <head>
      4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      5 <title>无标题文档</title>
      6 <style type="text/css">
      7 body{ margin:0; padding:0; }
      8 .ss{ 200px; border:1px solid #000; border-10px;height:200px; background: #009; margin:30px; float:left; color:#FFFFFF; opacity:0.3; filter:alpha(opacity=30) }
      9 
     10 
     11 </style>
     12 </head>
     13 
     14 <body>
     15 
     16 <div class="ss" id="a">
     17 </div>
     18 <div class="ss" id="b">
     19 
     20 </div>
     21 <div class="ss" id="c">
     22 fdsfsfsfsdfsdfsdfs
     23 </div>
     24 <div class="ss" id="d">
     25 
     26 </div>
     27 
     28 
     29 <script type="text/javascript">
     30  var obox=document.getElementById("a");
     31  var obox1=document.getElementById("b");
     32   var obox2=document.getElementById("c");
     33  var obox3=document.getElementById("d");
     34  obox.onmouseover=function(){
     35       moveDiv(this,{"opacity":100});
     36        //moveDiv(this,24,"fontSize");
     37  }
     38  obox.onmouseout=function(){    
     39      moveDiv(this,{"opacity":30}); 
     40     // moveDiv(this,12,"fontSize");
     41  }
     42  
     43  obox1.onmouseover=function(){
     44       moveDiv(this,{"height":800},function(){moveDiv(obox1,{"width":500})});
     45  }
     46  obox1.onmouseout=function(){    
     47      moveDiv(this,{"width":200},function(){moveDiv(obox1,{"height":200})}); 
     48  }
     49  obox2.onmouseover=function(){
     50       moveDiv(this,{"fontSize":32});
     51  }
     52  obox2.onmouseout=function(){    
     53      moveDiv(this,{"fontSize":12}); 
     54  }
     55  obox3.onmouseover=function(){
     56       moveDiv(this,{"width":500,"height":800,"opacity":100});
     57  }
     58  obox3.onmouseout=function(){    
     59      moveDiv(this,{"width":200,"height":200,"opacity":30}); 
     60  }
     61  
     62  
     63  
     64  
     65 //获得样式值
     66 function getCss(obj,name){
     67   var res;
     68   if(obj.currentStyle){
     69       return obj.currentStyle[name];   
     70   }else{  
     71       return window.getComputedStyle(obj,null)[name]; 
     72   } 
     73 }
     74 
     75 function   getClass(obj,classstyle){
     76   var allobj=document.getElementsByTagName("*");
     77   var objarr=[];
     78   for(var i=0,len=allobj.length;i<len;i++){
     79        if(allobj[i].clasName==classstyle){
     80          objarr.push(allobj[i]);
     81        } 
     82   }    
     83        return objarr;      
     84 }
     85 //多物体运动框架
     86 function  moveDiv(obj,json,fn){
     87     //obj.timer=nul
     88        clearInterval(obj.timer);
     89            obj.timer=setInterval(function(){
     90            var bStop=true;           
     91            for(var attr in json){    
     92                 var speed=10;
     93                 var cur=0;
     94                 if(attr=="opacity"){
     95                     cur=Math.round(parseFloat(getCss(obj,attr))*100);    
     96                 }else{    
     97                    cur=parseInt(getCss(obj,attr)); 
     98                 }
     99                  speed=(json[attr]-cur)/6;
    100                 speed=speed>0?Math.ceil(speed):Math.floor(speed); 
    101                 if(cur!=json[attr]){
    102                     bStop=false;
    103                 }
    104                 if(bStop){
    105                    clearInterval(obj.timer);
    106                    if(fn)fn();    
    107                 }else{
    108                     if(attr=="opacity"){
    109                         obj.style.filter='alpha(opacity='+(cur+speed)+')';
    110                         obj.style.opacity=(cur+speed)/100;
    111                     }else{
    112                         obj.style[attr]=cur+speed+"px";
    113                         
    114                     }
    115                 }
    116              }
    117                 
    118             },10);
    119 
    120 }
    121 
    122 </script>
    123 
    124 </body>
    125 </html>
    一个不敬业的前端攻城狮
  • 相关阅读:
    并发
    基础概念总结
    Tomcat总结
    JVM总结
    Spring事务管理
    数据结构和算法
    拦截器
    关于XML fragments parsed from previous mappers already contains value for错误的探索
    zookeeper比较好的学习地址
    关于idea中的maven打包
  • 原文地址:https://www.cnblogs.com/chaoming/p/3035213.html
Copyright © 2011-2022 走看看