JINHO 修改 加强功能
唉，最近几天在家里天天学习js，感觉js真的是太强悍了！
目标:每天让自己的技能提升1％
<html>
<head>
<style type="text/css">
#suspendDiv {
position: absolute;
width: 550px;
border: 2px solid black;
padding: 2px;
background-color: #CCFFFF;
visibility:hidden;
word-break: break-all;
z-index: 99;
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
</style>
<title></title>
</head>
<body>
<script type="text/javascript">
function suspendDiv(){
this.suspendDiv = null; //悬浮层对象
this.isHavaContent = null;//层里面是否有内容
//初始化
this.initSuspendDiv = function(){
var suspendDiv = document.createElement_x("div");
suspendDiv.id = "suspendDiv"; //+new Date().getTime();
suspendDiv.name = "suspendDiv";
this.suspendDiv = suspendDiv;
this.suspendDivId = suspendDiv.id;
//suspendDiv.className = "suspendDiv"; //这里怎么给样式不行呢?
document.body.appendChild(suspendDiv);
};
//设置内容
this.setContent = function(url, content, bgcolor, width){
if (url) {
var iframe = '<iframe src='+url+'';
iframe += ' style="width:100%;height:100%;background-color:transparent;"';
iframe += ' id="popupFrame" name="popupFrame" scrolling="no" frameborder="0" allowtransparency="true">';
iframe += '</iframe>';
this.suspendDiv.innerHTML = iframe;
}
else {
content = content || "null";
this.suspendDiv.innerHTML = content;
}
if(width)this.suspendDiv.style.width = width+"px";
if(bgcolor)this.suspendDiv.style.backgroundColor = bgcolor;
this.isHavaContent = true;
}
//处理鼠标移动
this.mouseMove = function(event){
if(!this.isHavaContent)return;
//鼠标距离悬浮层的x,y坐标为了鼠标在层的中央,X取层宽度的一半
var mouseOffDivX = -(parseInt(this.suspendDiv.style.width)/2);
var mouseOffDivY = 27;//此数值越大,悬浮层离元素越远
//解决兼容IE FF Opear
event = event||window.event;
var scrollL = event.pageX||event.x +this.suspendDiv.scrollLeft;
var scrollT = event.pageY||event.y+this.suspendDiv.scrollTop;
var clientW = 0;
if(window.opera){
clientW = window.innerWidth-event.clientX- mouseOffDivX - 20;
}else{
clientW = document.body.clientWidth-event.clientX- mouseOffDivX ;
}
var clientH = 0;
if(window.opera){ //兼容Opera浏览器
clientH = window.innerHeight - event.clientY - mouseOffDivY - 20;
}else{ //IE and FF
clientH = document.body.clientHeight -event.clientY- mouseOffDivY ;
}
//alert(document.documentElement.clientWidth);
//alert(document.body.clientWidth);
//左右极限坐标处理
if (clientW < this.suspendDiv.offsetWidth) {
this.suspendDiv.style.left = this.suspendDiv.scrollLeft + event.clientX - this.suspendDiv.offsetWidth + "px";
//}
}
else
if (scrollL < (-mouseOffDivX)) { //最左边的时候
this.suspendDiv.style.left = "8px";
}
else { //最右边的时候
this.suspendDiv.style.left = scrollL + mouseOffDivX + "px";//alert("3");
}
//上下极限坐标处理
if (clientH < this.suspendDiv.offsetHeight) {// [在最底部的时候,显示在文字的上面]
this.suspendDiv.style.top = this.suspendDiv.scrollTop + event.clientY - this.suspendDiv.offsetHeight -mouseOffDivY+ "px";
}
else {//[显示在目标元素的下面]
this.suspendDiv.style.top = scrollT + mouseOffDivY + "px";
}
//设置元素可见
this.suspendDiv.style.visibility = "visible";
//this.suspendDiv.style.display = "block";
}
//鼠标离开
this.mouseOutDiv = function(){
this.isHavaContent = false;//标记内容为空
this.suspendDiv.style.visibility = "hidden";
//this.suspendDiv.style.display = "none";
}
}
var s = new suspendDiv();
s.initSuspendDiv();
document.onmousemove = function(event){
return s.mouseMove(event);
}
</script>
<div style="position: absolute; right:0;bottom:0; ">
<a href="http://yaldex.com" onMouseover="s.setContent(0,'div1', '#80FF80', 100)";
onMouseout="s.mouseOutDiv();">Yaldex Software</a>
</div>
<div style="position: absolute; left:0;top:0; ">
<a href="http://yaldex.com" onMouseover="s.setContent(0,'div2', '#80FF80', 200)";
onMouseout="s.mouseOutDiv();">Yaldex Software</a>
</div>
<div style="position: absolute; left:0;bottom:0; ">
<a href="http://yaldex.com" onMouseover="s.setContent(0,'div3', '#80FF80', 300)";
onMouseout="s.mouseOutDiv();">Yaldex Software</a>
</div>
<div style="position: absolute; right:0;top:0; ">
<a href="http://yaldex.com" onMouseover="s.setContent('file:///D:\\text.html','0', '#80FF80', 400)";
onMouseout="s.mouseOutDiv();">Yaldex Software</a>
</div>
</body>
</html>
“七”乐无穷，尽在新浪新版博客，快来体验啊~~~请点击进入~
