CSS实用：DIV+CSS打造跟随鼠标的层_html-js-css

概述【建站学院文档】今天给大家写一篇CSS实用教程，《DIV+CSS打造跟随鼠标的层》，为了方便大家学习，特别分两部分一代码，二可运行的代码。以下为引用的内容：<html> <head> <meta http-equiv="Content-Type" content="text/html; charset…

【建站学院文档】今天给大家写一篇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>

<HTML><head><Meta http-equiv="Content-Type" content="text/HTML; charset=gb2312" /><Title>跟随鼠标的层－建站学院 www.wfuyu.com</Title>@H_403_64@ 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="#" _fcksavedurl="#" 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>

总结

以上是内存溢出为你收集整理的CSS实用：DIV+CSS打造跟随鼠标的层全部内容，希望文章能够帮你解决CSS实用：DIV+CSS打造跟随鼠标的层所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1020567.html

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

发表评论

评论列表（0条）