码迷,mamicode.com
首页 > Web开发 > 详细

CSSJS弹出层效果,兼容所有浏览器

时间:2015-08-17 14:10:46      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:浏览器   activex   鼠标放上去弹出层   

直接上DEMO,不过IE中会提示加载ActiveX控件!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CSSJS弹出层效果,兼容所有浏览器</title>
<script src="http://www.chinahbnet.com/Scripts/Common/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function show(obj,id) { 
var objDiv = $("#"+id+""); 
if(navigator.userAgent.indexOf("Firefox") > 0) {
	var $E = function() {var c = $E.caller; while(c.caller) c = c.caller; return c.arguments[0]};
	__defineGetter__("event", $E);
}
$(objDiv).css("display","block"); 
$(objDiv).css("left", event.clientX); 
$(objDiv).css("top", event.clientY + 10); 
} 
function hide(obj,id) { 
var objDiv = $("#"+id+""); 
$(objDiv).css("display", "none"); 
} 
</script>
<style type="text/css">
	.show_div{
		position:absolute;display:none;border:1px solid silver;background:silver;
	}
</style>
</head>
<body>
<div id="mydiv1" class="show_div"> 
提示1效果 
</div> 
<div id="mydiv2" class="show_div"> 
提示2效果 
</div> 

<a id="t1" onMouseOver="javascript:show(this,'mydiv1');" onMouseOut="hide(this,'mydiv1')">鼠标放上去1</a> 
<br><br><br><br><br> 
<a id="t2" onMouseOver="javascript:show(this,'mydiv2');" onMouseOut="hide(this,'mydiv2')">鼠标放上去2</a> 
</body>
</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

CSSJS弹出层效果,兼容所有浏览器

标签:浏览器   activex   鼠标放上去弹出层   

原文地址:http://blog.csdn.net/ybb350680013/article/details/47723115

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!