渐显效果 求助


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0;margin:0;}
#login{width:0px;height:0px;overflow:hidden;border:5px solid #0046a3;position:absolute;}
.title{width:400px;background:#ff6000;height:40px}
</style>
</head><body>
<div id="login">
<div class="title">登陆</div>
<div class="logincon">

</div>
</div>
<div id="click" style="margin:400px">click</div><script type="text/javascript">
var getStyleValue = function(obj,styleName){    //取得样式表的值
var myObj = document.getElementById(obj);
if(document.all){
return eval("myObj.currentStyle." + styleName);
}else{
return eval("document.defaultView.getComputedStyle(myObj,null)." + styleName);
}
};var $ = function(param){
return typeof param == 'string' ? document.getElementById(param) : param;
};
function getViewportInfo()   //获取浏览器尺寸
{
var w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;
var h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
return {width:w,height:h};
}function getElementPos(element) {    //获取节点实际位置
 var ua = navigator.userAgent.toLowerCase();
 var isOpera = (ua.indexOf('opera') != -1);
 var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
 var el = element;
 if(el.parentNode === null || el.style.display == 'none') {
  return false;
 }     
 var parent = null;
 var pos = [];    
 var box;    
 if(el.getBoundingClientRect)    //IE
 {         
  box = el.getBoundingClientRect();
  var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
  var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
  return {x:box.left + scrollLeft, y:box.top + scrollTop};
 }else if(document.getBoxObjectFor)    // gecko   
 {
  box = document.getBoxObjectFor(el);
  var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
  var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
  pos = [box.x - borderLeft, box.y - borderTop];
 } else    // safari & opera   
 {
  pos = [el.offsetLeft, el.offsetTop]; 
  parent = el.offsetParent;    
  if (parent != el) {
   while (parent) { 
    pos[0] += parent.offsetLeft;
    pos[1] += parent.offsetTop;
    parent = parent.offsetParent;
   } 
  }  
  if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) {
   pos[0] -= document.body.offsetLeft;
   pos[1] -= document.body.offsetTop;        
  }   
 }             
 if (el.parentNode) {
    parent = el.parentNode;
   } else {
    parent = null;
   }
 while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors
  pos[0] -= parent.scrollLeft;
  pos[1] -= parent.scrollTop;
  if (parent.parentNode) {
   parent = parent.parentNode;
  } else {
   parent = null;
  }
 }
 return {x:pos[0], y:pos[1]};
}
var timer = null,timeInterval = 5,step = 8,width = 200,height = 200,left = (getViewportInfo().width - 210) / 2,top = (getViewportInfo().height - 210) / 2,_stepL,_stepT;
function gradual(){
var temp = parseInt(getStyleValue("login","width"));
var tempH = parseInt(getStyleValue("login","height"));
var tempL = parseInt(getStyleValue("login","left"));
var tempT = parseInt(getStyleValue("login","top"));
clearTimeout(timer);
if(temp >= width && tempH >= height)
{
clearTimeout(timer);
return;
}else{
temp += step;
tempH += step;
tempL >= left ? tempL -= _stepL : tempL += _stepL;
tempT >= top ? tempT -= _stepT : tempT += _stepT;
}
$("login").style.width = temp + "px";
$("login").style.height = tempH + "px";
$("login").style.left = tempL + "px";
$("login").style.top = tempT + "px";
timer = setTimeout(arguments.callee,timeInterval);
}$("click").onclick = function(){
var elem = getElementPos(this);
with($("login").style){
left = elem.x + "px";
top = elem.y + "px";
}
_stepL =  Math.ceil((step * left) / width);
_stepT =  Math.ceil((step * top) / width);
gradual();
};
</script>
</body>
</html>
当我点击的时候，出现左右晃动现象，该如何解决？

解决方案 »

  1.   

    为什么左右晃动啊？是不是你设定了左右移动的动画了？那么适当的时候就调用end()函数结束就可以了
      

  2.   

    function gradual(){
        var temp = parseInt(getStyleValue("login","width"));
        var tempH = parseInt(getStyleValue("login","height"));
        var tempL = parseInt(getStyleValue("login","left"));
        var tempT = parseInt(getStyleValue("login","top"));
        clearTimeout(timer);
        if(temp >= width && tempH >= height)
        {
            clearTimeout(timer);
            return;
        }else{
            temp += step;    
            tempH += step;
            
            tempL -= step;
            tempT -= step;        }
      

  3.   

        tempL >= left ? tempL -= _stepL : tempL += _stepL;
            tempT >= top ? tempT -= _stepT : tempT += _stepT;你原来这样，大了就减掉，小了再加上，又大了再减掉……岂不就抖了？？？
      

  4.   

    要让它均匀向两边伸展的话，就这样：
    tempL -= step/2;
    tempT -= step/2;
      

  5.   


    _stepL,_stepT两个值我是根据比例得出来的
      

  6.   

    楼上的，问题已经解决，我已经用了cloudgamer的tween缓动效果