软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Html/css > CSS实用:DIV+CSS打造跟随鼠标的层

CSS实用:DIV+CSS打造跟随鼠标的层

【烈火建站学院文档】今天给大家写一篇CSS实用教程,《DIV+CSS打造跟随鼠标的层》,为了方便大家学习,特别分两部分一代码,二可运行的代码。

以下为引用的内容:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>跟随鼠标的层 - 烈火建站学院</title>
<script type="text/javascript">
function show_mp()
{
var obj=document.getElementById(’mpDiv’);
var L=T=0;
var divWidth=220;
var divHeight=70;
var padding=15;
var R= document.body.scrollLeft+document.body.clientWidth-divWidth;
var B = document.body.scrollTop+document.body.clientHeight-divHeight;
var x=document.body.scrollLeft+event.clientX;
var y=document.body.scrollTop+event.clientY;

obj.style.display="none";
if (x < L) { x = x+divWidth;}
if (x > R){ x = x-divWidth-padding*2;}
if (y < T) { y = T+divHeigh; }
if (y > B) { y = B-padding*2; }
obj.style.left=x+padding;
obj.style.top=y+padding;
obj.style.display="";
}
function hidden_mp()
{
var obj=document.getElementById(’mpDiv’);
obj.style.display="none";
}
</script>
</head>
<body>
<a href="#" onMouseOver="show_mp()" onMouseOut="hidden_mp()">afasdfds</a>
<div id="mpDiv" style='width: 220px; overflow: hidden; position:absolute; z-index:5; display:none;'>
<table width="220" border="0" cellpadding="0" cellspacing="1" bgcolor="#fc9c0a">
  <tr>
    <td height="70" valign="top" bgcolor="#ffffff"  style='padding:5px;'></td>
  </tr>
</table>
</div>
</body>
</html>

 


    相关阅读
    栏目导航
    推荐软件