javascript tips提示效果代码

网页特效 tips教程提示效果代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.zzzyk.com/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>网页特效 tips提示效果代码</title>
<style type="text/css教程">
*{ margin:0; padding:0}
#a{ width:300px; height:300px; display:none; background:#cf0; position:absolute;z-index:2}
#c div{ position:absolute;background:#c00; width:50px; height:50px;}
#c div.d1{ left:1000px;top:50px}
#c div.d2{ left:800px;top:500px}
#c div.d3{ left:10px;top:30px}
#c div.d4{ left:50px;top:650px}
#c div.d5{ left:500px;top:50px}
#c div.d6{ left:300px;top:300px}
#c div.d7{ left:1100px;top:700px}
#c div.d8{ left:300px;top:600px}
</style>
</head>
<body>
<div id="a">www.zzzyk.com</div>
<div id="c">
<div class="d1">www.zzzyk.com</div>
<div class="d2">www.zzzyk.com</div>
<div class="d3">www.zzzyk.com</div>
<div class="d4">www.zzzyk.com</div>
<div class="d5">www.zzzyk.com</div>
<div class="d6">www.zzzyk.com</div>
<div class="d7">www.zzzyk.com</div>
<div class="d8">www.zzzyk.com</div>
</div>
</body>
<script type="text/javascript">
function getstyle(obj,name){
return obj.currentstyle?obj.currentstyle[name]:(document.defaultview.getcomputedstyle(obj,"").getpropertyvalue(name))
}
for(var i=0;i<document.getelementbyid("c").getelementsbytagname("div").length;i++){
document.getelementbyid("c").getelementsbytagname("div")[i].onmouseo教程ver=function(){
  var o=document.getelementbyid("a");
  var s=document.getelementbyid("c");

  if(!o.style.left)o.style.left=0;
  if(!o.style.top)o.style.top=0;

  var ow = getstyle(o,"width");
  var oh = getstyle(o,"height");
  var sl = getstyle(this,"left");
  var st = getstyle(this,"top");
  var sw = getstyle(this,"width");
  var sh = getstyle(this,"height");

  ow = parseint(ow);
  oh = parseint(oh);
  sl = parseint(sl);
  st = parseint(st);
  sw = parseint(sw);
  sh = parseint(sh);

  var x=(x<=ow+sw+10)?360:document.documentelement.clientwidth;
  var y=(y<=oh+sh+10)?360:document.documentelement.clientheight;

  if(x < ow+sw){
   o.style.left = sl+sw+10 + "px"
  }else{
   o.style.left = (x-sl-10 > ow)?(sl+sw+10 + "px"):(sl-ow-10 + "px");
  }
  if(y < ow+sw){
   o.style.top = st+10 + "px"
  }else{
   o.style.top = (y-st-10 > oh)?(st+10 + "px"):(st-oh-10+sh + "px");
  }

  o.style.display="block";
}

document.getelementbyid("c").getelementsbytagname("div")[i].onmouseout=function(e){
  var o=document.getelementbyid("a");
  o.style.display="none";
}
}
</script>

</html>

补充：网页制作,js教程