让2个div一个变宽 一个变高

标签：

<style>
    div {  width:100px; height:150px; margin:20px; background:green;}
</style>

<script>
window.onload = function(){
 //申明变量oDiv1并让它获取到元素DIV1的对象;
 var oDiv1 = document.getElementById("div1");
 //申明变量oDiv2并让它获取到元素DIV2的对象;
 var oDiv2 = document.getElementById("div2");
 
 //给鼠标移入变量odiv1创建事件
 oDiv1.onmouseover = function(){
  //函数   (当前圆度,宽度,到300像素)
  startMove(this,"width",300);
 }
 //给鼠标移出变量odiv1创建事件
 oDiv1.onmouseout = function(){
  //函数  (当前元素,宽度 到100像素)
  startMove(this,"width",100);
 }
 
 //给鼠标移入变量oDiv2创造事件并赋值
 oDiv2.onmouseover = function(){
  //函数 (当前元素,高度,到300像素)
  startMove(this,"height",300);
 }
 //给鼠标移出变量oDiv2创造事件并赋值
 oDiv2.onmouseout = function(){
  //函数(当前元素,高度,到150像素)
  startMove(this,"height",150);
 }
 
}
//创建函数 并设置参数(当前元素,属性,目标距离)
function startMove(obj,name,iTarget){
 
 //清楚当前元素的定时器;
 clearInterval(obj.timer);
 //为当前元素创建定时器并赋值,
 obj.timer = setInterval(function(){
  //设置变量 attr 并赋值,获取到当前元素的属性值然后并取整数
  var attr = parseInt(getStyle(obj,name));
  //设置变量speed并赋值(目的距离-attr)/6
  var speed = (iTarget - attr)/6;
  /*类似
  if(speed>0)
  {speed=math.ceil(speed)} 给speed向上取整
  else
  {math.floor(speed)}给speed向上取整 */
  speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
  //如果速度当前距离=目标距离
  if(attr == iTarget)
  {
   //责清楚当前元素定时器
   clearInterval(obj.timer);
  }
  else
  {
   obj.style[name] = attr + speed + "px";
  }
 
 },30);
}

function getStyle(obj,name){
 if(obj.currentStyle){
  return obj.currentStyle[name];
 } else{
  getComputed(obj,null)[name];
 }
 
}

</script>

body>
<div id="div1"></div>
<div id="div2"></div>

</body>

让2个div一个变宽 一个变高

标签：

原文地址：http://www.cnblogs.com/web168/p/4791539.html