您當前位置：首頁 > web前端 > htmlcss > CSS實用：DIV+CSS打造跟隨鼠標的層

CSS實用：DIV+CSS打造跟隨鼠標的層

來源：程序員人生發布時間：2014-03-12 15:03:53 閱讀次數：4228次

【建站學院文檔】今天給大家寫一篇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.vxbq.cn</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="#" _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>

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 按照用戶思維打造熱點讓網站流量源源不斷

下一篇 JavaScript學習之函數類與setInterval問題

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

CSS實用：DIV+CSS打造跟隨鼠標的層