仿youku鼠标悬停js

发布时间:2014-10-25 2:23:16
来源:分享查询网

<!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>  <title> new document </title><style>#dhooo_tip{ position:absolute;  width:180px; }#tip_body{ background:#FFFFE1;  position:relative;  top:-3px;left:-3px; border:1px solid #000; padding:10px;  font-size:12px; font-family:Arial; color:#999; }#tip_body div{ color:#000;  margin-top:10px;}.tip_bg{ background:#ddd;  height:100%; }#test li{ width:200px; margin:10px;  padding:10px; background:#CCFF00;  border:1px solid #666;   list-style-type:none; font-size:12px;}</style> </head>  <body><ul  id="test"> <li>1. 最壮观的春运购票队伍</li> <li>2. 痴情ホ偶</li> <li>3. 添加到点播单</li> <li>4. 不知道少什么</li> <li>5. 没有人知道吗?</li></ul> </body> <script type="text/javascript">/*dhoooTip对象声明*/dhoooTip={ init:function (){  function UI(ini,parent){    var $=document.createElement('DIV');    for (k in ini) {$[k]=ini[k]}    return (parent||document.body).appendChild($);  }  this.shell=UI({id:'dhooo_tip'});  this.shell.style.visibility='hidden';  this.body=UI({id:"tip_body",innerHTML:'test'},UI({className:"tip_bg"},this.shell)); } ,show:function ($){  for(var x=y=0;$;$=$.offsetParent){x+=$.offsetLeft;y+=$.offsetTop};  y-=this.shell.offsetHeight+5;  with(this.shell.style){left=x;top=y; visibility='visible';} } ,hide:function (){this.shell.style.visibility='hidden';} ,bind:function ($,text){  if(!this.inited)this.inited=!this.init();  $.onmouseover=function(){   dhoooTip.body.innerHTML=text+'<div>无忧播报</div>';   dhoooTip.show(this)  }  $.onmouseout=function (){dhoooTip.hide()}   }} var lis=document.getElementsByTagName("LI");/*绑定所有要响应的对象与内容文本;*/for (var i=0;i<lis.length;i++ ) dhoooTip.bind(lis[i],lis[i].innerHTML); </script></html>

返回顶部
查看电脑版