• 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.5; filter:alpha(opacity=50) }
      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,100,"opacity");
     36        //moveDiv(this,24,"fontSize");
     37  }
     38  obox.onmouseout=function(){    
     39      moveDiv(this,50,"opacity"); 
     40     // moveDiv(this,12,"fontSize");
     41  }
     42  
     43  obox1.onmouseover=function(){
     44       moveDiv(this,500,"height");
     45  }
     46  obox1.onmouseout=function(){    
     47      moveDiv(this,200,"height"); 
     48  }
     49  obox2.onmouseover=function(){
     50       moveDiv(this,32,"fontSize");
     51  }
     52  obox2.onmouseout=function(){    
     53      moveDiv(this,12,"fontSize"); 
     54  }
     55  obox3.onmouseover=function(){
     56       moveDiv(this,500,"width");
     57  }
     58  obox3.onmouseout=function(){    
     59      moveDiv(this,200,"width"); 
     60  }
     61  
     62  
     63 //获得样式值
     64 function getCss(obj,name){
     65   var res;
     66   if(obj.currentStyle){
     67       return obj.currentStyle[name];   
     68   }else{  
     69       return window.getComputedStyle(obj,null)[name]; 
     70   } 
     71 }
     72 
     73 
     74 //多物体运动框架
     75 function  moveDiv(obj,iTag,sty){
     76     //obj.timer=null
     77     var speed=10;
     78     clearInterval(obj.timer);
     79     obj.timer=setInterval(function(){
     80         var cur=0;
     81         if(sty=="opacity"){
     82             cur=Math.round(parseFloat(getCss(obj,sty))*100);    
     83         }else{    
     84            cur=parseInt(getCss(obj,sty)); 
     85         }
     86          speed=(iTag-cur)/6;
     87         speed=speed>0?Math.ceil(speed):Math.floor(speed); 
     88         if(cur==iTag){
     89            clearInterval(obj.timer);    
     90         }else{
     91             if(sty=="opacity"){
     92                 obj.style.filter='alpha(opacity='+(cur+speed)+')';
     93                 obj.style.opacity=(cur+speed)/100;
     94             }else{
     95                 obj.style[sty]=cur+speed+"px";
     96                 
     97             }
     98         }
     99         
    100     },10);
    101 
    102 }
    103 
    104 </script>
    105 
    106 </body>
    107 </html>
    一个不敬业的前端攻城狮
  • 相关阅读:
    Select For Update使用场景   
    数据库的ACID特性
    Zookeeper和Eureka的区别
    SpringMvc的控制器是不是单例模式,如果是,有什么问题,怎么解决?
    如果你也用过struts2.简单介绍下springMVC和struts2的区别有哪些?
    如何理解Hibernate的延迟加载机制?在实际应用中,延迟加载与Session关闭的矛盾是如何处理的?
    延迟加载与session关闭的矛盾一般可以这样处理:
    举一个多对多关联的例子,并说明如何实现多对多关联映射。
    java的基本操作和基本知识技能
    HTML基础
  • 原文地址:https://www.cnblogs.com/chaoming/p/3026472.html
Copyright © 2020-2023  润新知