相對固定位置JS+CSS布局實例，彈出提示層_層和布局特效

相對但又智能固定位置的布局實例，JS+CSS彈出提示層，如果提示層出現在屏幕邊緣，那么Js會智能判斷出位置，并更改顯示位置，提升人性操作，彈出的提示層內可放入圖片、文字等內容，如果要提示的層比較多，可按示例CSS中的代碼繼續增加就行了，注意數字要改變，不能重復。

<!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>固定瀏覽器顯示區域內的彈出提示層</title>
<meta http-equiv="mrc-type" mrc="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;}
#a{width:280px;height:160px;display:none;background:#cf0;position:absolute;z-index:2;}
#c div{position:absolute;background:#c00;width:50px;height:50px;}
#c div.d1{left:1000px;top:50px;}
#c div.d2{left:800px;top:500px;}
#c div.d3{left:10px;top:30px;}
</style>
</head>
<body>
<div id="a">mb5u.com</div>
<div id="c">
  <div class="d1">鼠標放這里</div>
  <div class="d2">鼠標放這里</div>
  <div class="d3">鼠標放這里</div>
</div>
<script type="text/javascript">
function getStyle(obj,name){
	return obj.currentStyle?obj.currentStyle[name]:(document.defaultView.getComputedStyle(obj,"").getPropertyValue(name))
}
for(var i=0;i<document.getElementById("c").getElementsByTagName("div").length;i++){
	document.getElementById("c").getElementsByTagName("div")[i].onmouseover=function(){
		var o=document.getElementById("a");
		var s=document.getElementById("c");
		if(!o.style.left)o.style.left=0;
		if(!o.style.top)o.style.top=0;
		var ow = getStyle(o,"width");
		var oh = getStyle(o,"height");
		var sl = getStyle(this,"left");
		var st = getStyle(this,"top");
		var sw = getStyle(this,"width");
		var sh = getStyle(this,"height");
		ow = parseInt(ow);
		oh = parseInt(oh);
		sl = parseInt(sl);
		st = parseInt(st);
		sw = parseInt(sw);
		sh = parseInt(sh);
		var x=(x<=ow+sw+10)?360:document.documentElement.clientWidth;
		var y=(y<=oh+sh+10)?360:document.documentElement.clientHeight;
		if(x < ow+sw){
			o.style.left = sl+sw+10 + "px"
		}else{
			o.style.left = (x-sl-10 > ow)?(sl+sw+10 + "px"):(sl-ow-10 + "px");
		}
		if(y < ow+sw){
			o.style.top = st+10 + "px"
		}else{
			o.style.top = (y-st-10 > oh)?(st+10 + "px"):(st-oh-10+sh + "px");
		}
		o.style.display="block";
	}
	document.getElementById("c").getElementsByTagName("div")[i].onmouseout=function(e){
		var o=document.getElementById("a");
		o.style.display="none";
	}
}
</script>
</body>
</html>

所屬頻道：層和布局特效/更新時間：2012-11-01

[收藏][報錯][返回列表]

相關層和布局特效：

相對固定位置JS+CSS布局實例，彈出提示層_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些