javascript对层的控制

Question

<style>
   .notis{
      position:absolute;
      height:80px;
      width:80px;
      color:white;
      background-color:black;
      border:solid 1px red;
   }
</style>
<script language=javascript>
   var oDiv = null;
   function sDiv(){
        if(!oDiv){
           oDiv = document.createElement("div");
           oDiv.className = "notis";
           oDiv.innerHTML = "your notis here";
           document.body.appendChild(oDiv);
        }
        oDiv.style.visibility = "visible";
   }
   function hDiv(){
      oDiv.style.visibility = "hidden";
   }
</script>
<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" onmouseover="sDiv()" onmouseout="hDiv()">

Answer 1

<style>
   .notis{
      position:absolute;
      height:80px;
      width:80px;
      color:white;
      background-color:black;
      border:solid 1px red;
   }
</style>
<script language=javascript>
   var oDiv = null;
   function sDiv(){
        if(!oDiv){
           oDiv = document.createElement("div");
           oDiv.className = "notis";
           oDiv.innerHTML = "your notis here";
           document.body.appendChild(oDiv);
        }
        oDiv.style.visibility = "visible";
   }
   function hDiv(){
      oDiv.style.visibility = "hidden";
   }
</script>
<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" onmouseover="sDiv()" onmouseout="hDiv()">

Answer 2

sorry。网络问题，发了两遍。

Answer 3

第二个问题，可以点击层里面：
oDiv.innerHTML="<a herf='http://www.google.cn">your notis here</a>"

Answer 4

可以在上面的hDiv方法中首先判断鼠标当前的坐标，如果在层的内部则不执行隐藏语句

Answer 5

function mousePosition() {   //返回鼠标位置
   var ev = ev || window.event;
if(ev.pageX || ev.pageY){
return {
x:ev.pageX, y:ev.pageY
}
}
return {
  x:ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
  y:ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop
}
}
function hDiv() {
var mousePos = mousePosition();
var xx = mousePos.x;
var yy = mousePos.y;
//设置最小范围
divXMin = document.getElementById("div").style.left;
divYMin = document.getElementById("div").style.top;
//设置最大范围
divXMax = divXMin + document.getElementById("div").offsetWidth;
divYMax = divYMin + document.getElementById("div").offsetHeight;

        if(xx<divXMin||xx>divXMax||yy<divYMin||yy>divYMax)  //鼠标超出层的范围，切不在图片上，层隐藏
           oDiv.style.visibility = "hidden";
}

Answer 6

这个比较简单：<style>
   .notis{
      position:absolute;
      height:80px;
      width:80px;
      color:white;
      background-color:black;
      border:solid 1px red;
   }
</style>
<script language=javascript>
   var oDiv = null;
   var flg = false;
   function sDiv(){
        if(!oDiv){
           oDiv = document.createElement("div");
           oDiv.className = "notis";
           oDiv.innerHTML = "<a href='http://www.google.cn'>your notis here</a>";
           oDiv.onmouseover = function(){if(this.style.visibility== "visible")flg=true;}
           oDiv.onmouseout = function(){flg=false;hDiv();}
           document.body.appendChild(oDiv);
        }
        oDiv.style.visibility = "visible";
   }
   function hDiv(){
      if(!flg)oDiv.style.visibility = "hidden";
   }
</script>
<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" onmouseover="sDiv()" onmouseout="setTimeout(hDiv,1000)">

Answer 7

http://ent.163.com/08/0222/06/459NQG5N00031H2L.html,你们看下这个咯，这上面有蓝色字体，你把鼠标放上去，就知道了，我想做类似她这个样子!

Answer 8

你的QQ号是多少？我加你咯? msn 也可以

Answer 9

11楼的正解，但有一点小bug，当鼠标离开图片，且不放到层上，当层未消失时，鼠标再次移到图片上会出现不稳定的情况。借花献佛稍微修改一下:-)
<style>
   #div{
      position:absolute;
  height:80px;
  width:80px;
      color:white;
      background-color:black;
      border:solid 1px red;
   }
</style>
<script language=javascript>
   var oDiv = null;
   var flg = false;
   var aa;
   function sDiv(){
clearTimeout(aa);
       div.style.visibility = "visible";
   }
   function hDiv(){
      if(!flg)div.style.visibility = "hidden";
   }
   function sSelf() {
if(div.style.visibility== "visible") flg=true;
   }
   function hSelf() {
flg=false;
hDiv();
   }
   function init() {
 aa = setTimeout(hDiv,500)
   }
</script>
<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" onmouseover="sDiv()" onmouseout="init();">
<div id="div" style="visibility: hidden;" onmouseover="sSelf();" onmouseout="hSelf();"></div>

Answer 10

前面的要求都要达到，现在这个题又有点问题咯，层的显示位置，我要它跟着鼠标走，我自己改了下 js代码，但是如果这样的话，前面的效果又有点问题咯!请高手看看我的代码，帮我改改;var oDiv = null;
   var flg = false;
   var aa;
   var x;
   var y;
   
   function sDiv(text){
       clearTimeout(aa);
       if(!flg){ 如果层是第一次出现，它的位置由鼠标的位置决定。
       div.style.left=window.event.clientX+15;
       div.style.top=window.event.clientY+15;
       x=window.event.clientX+15;
       y=window.event.clientY+15;
       div.innerHTML=text;
       div.style.visibility = "visible";
       
       }else{//如果层已经出现，要求它的位置不变
       
       div.style.left=x;
       div.style.top=y;
       div.innerHTML=text;
       div.style.visibility = "visible";
       }
   }
   function hDiv(){
      if(!flg)div.style.visibility = "hidden";
   }
   function sSelf() {
        if(div.style.visibility== "visible") flg=true;
   }
   function hSelf() {
        flg=false;
        hDiv();
   }
   function init() {
     aa = setTimeout(hDiv,1000)
   }