qq图像移入移出效果的两种写法

第一种办法如下:
<!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>
<script type="text/javascript" language="javascript">
window.onload=function(){
var div1=document.getElementById('touxiang');
var div2=document.getElementById('touxiangrong');
var timer=null;

div1.onmouseover=show;
div1.onmouseout=hide;
div2.onmouseout=hide;
div2.onmouseover=function(){
     clearTimeout(timer);
    };    
        
function show(){
    if (timer)
    {
    clearTimeout(timer);
    }
    div2.style.display='block';    
}

function hide(){
    timer=setTimeout(
        function(){
            div2.style.display='none';
    },300);    
}

}
</script>
<style type="text/css">
body{font:normal 12px Tahoma;font-family:"寰蒋闆呴粦";}
/*div{ overflow:hidden;}*/
h1,h2,h3,h4,h5,h6,div,p,ul,ol,dl,dd,dt,abbr,form,input,img,em{margin:0;padding:0;}
ul{ list-style:none;}
#rongqi{ width:340px; height:200px; background-color:#67b9f3;}
#daohang{ float:left; width:40px; height:196px; border:1px solid #000; padding:3px 3px 0 3px; background:#0a7ac9}
#touxiang{ width:40px; height:40px;}
#touxiangrong{ float:left;width:264px; height:187px; margin:6px 5px 5px 10px; display:none;}
#touxiangrong .yuan{ height:2px; background:url(../yuanjiao.gif);margin:0px; padding:0px;}
 #touxiangrong .yuan2{ height:2px; background:url(../yuanjiao2.gif); margin:0px; padding:0px;}
#touxiangrong .leirong{
    margin:0px;
    padding:0px;
    height:182px;
    background:#f3ffff;
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 0px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #202b33;
    border-right-color: #202b33;
    border-bottom-color: #202b33;
    border-left-color: #202b33;
 }
 .leirong .toux{ width:80px; height:130px ; margin:4px 6px 8px 5px;  
 border:1px solid #cdd3cf; float:left;}
 .leirong .xixi{ float:left;}
.xixi .Li1 a{color:#3d6678; text-decoration:none;}/* 鏈闂殑閾炬帴 */
 .xixi .Li1 a:hover {overflow:hidden ;color: #3d6678; text-decoration:underline;}/* 褰撴湁榧犳爣鎮仠鍦ㄩ摼鎺ヤ笂 */



</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>鏃犳爣棰樻枃妗?/title>
</head>

<body>
<div id="rongqi">
<div id="daohang">
<div id="touxiang">
<img src="../touxiang1.gif" width="40" height="40"/></div>
</div>
<div id="touxiangrong">
<div class="yuan"></div>
<div class="leirong">
<div class="toux"><img src="../tx.gif" width="80" height="130"/></div>
<div class="xixi">
<ul>
<li class="Li1"> <a href="#">瀹囦箣缂橈紙578173618锛?/a></li>
<li>琚汉閬楀繕 浜嗭紒</li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="yuan2"></div>

</div>
</div>
</body>
</html>
如果你第一种办法不懂的话那就看下边第二种办法..下午或者晚上补上,现在要忙工作-_-