教程集 > jQuery > jquery 教程 > 正文 Javascript鼠标移入智能提示浮动层Tips效果

Javascript鼠标移入智能提示浮动层Tips效果

发布时间：2023-12-19 编辑：jiaochengji.com

教程集为您提供Javascript鼠标移入智能提示浮动层Tips效果等资源，欢迎您收藏本站，我们将为您提供最新的Javascript鼠标移入智能提示浮动层Tips效果资源

文章给大家介绍一个Javascript鼠标移入智能提示浮动层Tips效果代码，有需要了解的同学可进入参考。

提示：您可以先修改部分代码再运行

<!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>JS实现的鼠标移入智能提示层Tips</title>   <style>   * { padding: 0; margin: 0; }   li { }   body { background: #fdf7f7; }       #explain { height: 60px; border-bottom: 1px solid #999999; background: #eee; font-size: 14px; color: #666; text-align: center; line-height: 60px; }   #explain a { color: #990000; font-weight: bold; text-decoration: none; border-bottom: 1px dotted #990000; }   #explain a:hover { border-bottom: 2px solid #990000; }   #explain strong { color: #990000; }   ul { width: 716px; position: absolute; top: 260px; left: 50%; margin-left: -358px; }   li { width: 160px; height: 100px; list-style: none; background: #fff; padding: 3px; border-top: 1px solid #ddd; border-right: 2px solid #ddd; border-bottom: 2px solid #ddd; border-left: 1px solid #ddd; float: left; margin-right: 10px; cursor: pointer; }   img { float: left; }   #topic { width: 270px; background: #fff; padding: 3px; border-top: 1px solid #ddd; border-right: 2px solid #ddd; border-bottom: 2px solid #ddd; border-left: 1px solid #ddd; position: absolute; top: 100px; left: 200px; }   #topic .adorn { width: 7px; height: 11px; overflow: hidden; background: url(/upload/201011/20101103150729602.gif); position: absolute; bottom: 15px; left: -7px; }   #topic .adorn_r { width: 7px; height: 11px; overflow: hidden; background: url(/upload/201011/20101103150729137.gif); position: absolute; bottom: 15px; right: -7px; }   #topic .inner_html { padding: 10px; line-height: 20px; font-size: 12px; color: #666; text-indent: 24px; font-family: arial; }   #topic .inner_html a { color: #990000; font-weight: bold; text-decoration: none; border-bottom: 1px dotted #990000; }   #topic .inner_html a:hover { border-bottom: 2px solid #990000; }   </style>   <script type="text/javascript">   var g_aData=   [   'ok12.net---好用的鼠标提示符好用的鼠标提示符好用的鼠标提示符---1111',  'ok12.net---好用的鼠标提示符好用的鼠标提示符好用的鼠标提示符---2222',   'ok12.net---好用的鼠标提示符好用的鼠标提示符好用的鼠标提示符---3333'  ];       var g_oTimerHide=null;       window.onload=function ()   {   var aLi=document.getElementById('content').getElementsByTagName('li');       bindTopic(aLi);   };       function bindTopic(aElement)   {   var i=0;       for(i=0;i<aElement.length;i  )   {   aElement[i].miaovIndex=i;   aElement[i].onmouseover=function (ev){showTopic(this.miaovIndex, window.event || ev);};   aElement[i].onmouseout=function (){hideTopic();};   aElement[i].onmousemove=function (ev)   {   var oEvent=window.event || ev;   setPosition(oEvent.clientX, oEvent.clientY);   };   }   }       function showTopic(index, oEvent)   {   var oTopic=document.getElementById('topic');       if(g_oTimerHide)   {   clearTimeout(g_oTimerHide);   }       oTopic.getElementsByTagName('div')[1].innerHTML=g_aData[index];   oTopic.style.display='block';       setPosition(oEvent.clientX, oEvent.clientY);   }       function hideTopic()   {   var oTopic=document.getElementById('topic');       if(g_oTimerHide)   {   clearTimeout(g_oTimerHide);   }   g_oTimerHide=setTimeout   (   function ()   {   oTopic.style.display='none';   },50   );   }       function setPosition(x, y)   {   var top=document.body.scrollTop || document.documentElement.scrollTop;   var left=document.body.scrollLeft || document.documentElement.scrollLeft;       x =left;   y =top;       var oTopic=document.getElementById('topic');   var l=x 20;   var t=y-(oTopic.offsetHeight-20);   var bRight=true;   var iPageRight=left document.documentElement.clientWidth;       if(l oTopic.offsetWidth>iPageRight)   {   bRight=false;       l=x-(oTopic.offsetWidth 20);   oTopic.getElementsByTagName('div')[0].className='adorn_r';   }   else   {   oTopic.getElementsByTagName('div')[0].className='adorn';   }       oTopic.style.left=l 'px';   oTopic.style.top=t 'px';   }   </script>   </head>       <body>   <div id="explain">可以调整窗口大小，再把鼠标移到图片上查看……</div>   <div id="topic" style="display: none; z-index:2">   <div class="adorn"></div>   <div class="inner_html"></div>   </div>       <ul id="content">   <li>这是文字1111的， 也可以是图片<img  /></li>   <li>这是文字2222的， 也可以是图片<img  /></li>   <li>这是文字3333的， 也可以是图片<img  /></li>  </ul>   </body>   </html> </td>  	  </tr>  	</table>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
网页标题随机显示名言js代码
 js页面滚动时层智能浮动定位实现(jQuery/MooTools)
jquery实现的提示浮层跟随鼠标移动
 jquery 文字浮动提示效果(示例)
jquery 简短几句代码实现给元素动态添加及获取提示信息
 鼠标的滚轮失灵怎么办？
利用jQuary实现文字浮动提示效果示例代码
 js随机漂浮广告代码示例
 jQuery powerFloat
jQuery powerFloat万能浮动层下拉层插件使用介绍

上一篇：jquery toggle()实现点击展开，点击收缩的效果下一篇：js鼠标经过表格，行与列变色效果代码

[关闭]

Javascript鼠标移入智能提示浮动层Tips效果

最近更新

浏览排行