相对固定位置JS+CSS布局实例，弹出提示层_层和布局特效

缂傚倷绀佸ú锕傚焻缁€鎱筪eCMS闁荤喐鐟ュΛ婵嬨€傞崼鏇炴瀬婵炲棙鍨熼弻锟�婵炴垶姊规竟鍡涘煘閺嶎厽鈷掗柨鐕傛嫹缂備礁顦遍崰鎰耿閸ヮ剙绀夐柍銉ㄦ珪閻濓拷闂備緡鍋勯ˇ杈╃礊婢跺本鍏滈柡鍥ㄦ皑闂夊秹鏌ゆ潏銊︻棖缂佹唻鎷� 闂佸搫鍟版慨鎾椽閺嶎偆鍗氭繛鍡樻尰濮ｆ劗鈧鎮堕崕閬嶅矗閿燂拷,闂佽皫鍕姢閻庤濞婂鍫曞礃椤斿吋顏熸繛鎴炴尨閸嬫捇姊哄▎鎯ф灈闁告瑥绻樺濠氭晸閿燂拷!

相对但又智能固定位置的布局实例，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订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些

闂佽　鍋撻柟顖滃椤ワ拷&闂佸憡甯掑Λ鏃堟閿燂拷

相对固定位置JS+CSS布局实例，弹出提示层_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些

闂佽 鍋撻柟顖滃椤ワ拷&闂佸憡甯掑Λ鏃堟閿燂拷

闂佽　鍋撻柟顖滃椤ワ拷&闂佸憡甯掑Λ鏃堟閿燂拷