各位帮帮忙 onmouseover的有关问题

2013-11-23

各位帮帮忙 onmouseover的问题 body{margin:0}#div1{border:1px solid redwidth:300pxheight:300px}d

各位帮帮忙 onmouseover的问题

 body{
    margin:0;
  }
   #div1{
     border:1px solid red;width:300px;height:300px;
   }

<div style="margin-left:-270px;"onmouseover="over1()"onmouseout="out()"id="div1">
   gfdgfdfgfdhgfhgfjhgjhgjgh
 </div>

 var i;var j; 
         function over2(){
  //clearInterval(j);
   var div2=document.getElementById("div1");
   var m=div2.style.marginLeft;
   m=parseInt(m);
   if(m<0){
m=m+1;
  div2.style.marginLeft=m+"px";
   }else{
     clearInterval(i);
   }
 }  
 function over1(){ 
   i=setInterval("over2()",10);
 }
 function tt(){
// clearInterval(i);
   var div1=document.getElementById("div1");
   var m=div1.style.marginLeft;
   m=parseInt(m);
   if(m>-270){
      m=m-1;
  div1.style.marginLeft=m+"px";
   }else{
     clearInterval(j);
   }
 }  
 function out(){
   j=setInterval("tt()",10);
 }

我想当鼠标放上去的时候，矩形会出来，移开时收索回去。并不是只在完全出来后才收缩，只要鼠标移开就行。而且只要鼠标放上去就慢慢移出来，上面的代码有问题，加上那两行注释的也不行。各位帮帮忙，本人刚开始学
[解决办法]
function over2(){

               var div2=document.getElementById("div1");
               var m=div2.style.marginLeft;
               m=parseInt(m);
               if(m<0){
                m=m+1;
                  div2.style.marginLeft=m+"px";
               }else{
                 clearInterval(i);
               }
             }
             function over1(){
                if(i)clearInterval(i);
               i=setInterval("over2()",10);
             }
             function tt(){
                // clearInterval(i);
               var div1=document.getElementById("div1");
               var m=div1.style.marginLeft;
               m=parseInt(m);
               if(m>-270){
                  m=m-1;
                  div1.style.marginLeft=m+"px";
               }else{
                 clearInterval(i);
               }
             }
             function out(){
if(i)clearInterval(i);
               i=setInterval("tt()",10);
             }
[解决办法]
<!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">
body{
            margin:0;
          }
           #div1{
             border:1px solid red;width:300px;height:300px;
           }
</style>
<script type="text/javascript">
var i;var j;
             function over2(){

               var div2=document.getElementById("div1");
               var m=div2.style.marginLeft;
               m=parseInt(m);
               if(m<0){
                m=m+1;
                  div2.style.marginLeft=m+"px";
               }else{
                 clearInterval(i);
               }
             }
             function over1(){
if(j){
                  clearInterval(j);
  }
               i=window.setInterval("over2()",30);

             }
             function tt(){
               var div1=document.getElementById("div1");
               var m=div1.style.marginLeft;
               m=parseInt(m);
               if(m>-270){
                  m=m-1;
                  div1.style.marginLeft=m+"px";
               }else{
                 clearInterval(j);
               }
             }
             function out(){

if(i){
                 clearInterval(i);
}
               j=setInterval("tt()",30);
             }
</script>
</head>

<body>
<div style="margin-left:-270px;"onmouseover="over1()"onmouseout="out()"id="div1">
           gfdgfdfgfdhgfhgfjhgjhgjgh
         </div>
</body>
</html>

热点排行

JavaScript

各位帮帮忙 onmouseover的有关问题