精典悬浮div收藏

<html>
<head>
<title>_xWin</title>
<script language=JScript>
<!--
//可以打包为js文件;
var x0=0,y0=0,x1=0,y1=0;
var offx
=6,offy=6;
var moveable
=false;
var hover
='orange',normal='slategray';//color;
var index=10000;//z-index;
var xx;
//开始拖动;
function startDrag(obj)
{
        
if(event.button==1)
        {
                
//锁定标题栏;
                obj.setCapture();
                
//定义对象;
                var win = obj.parentNode;
                var sha 
= win.nextSibling;
                
//记录鼠标和层位置;
                x0 = event.clientX;
                y0 
= event.clientY;
                x1 
= parseInt(win.style.left);
                y1 
= parseInt(win.style.top);
                
//记录颜色;
                normal = obj.style.backgroundColor;
                
//改变风格;
                obj.style.backgroundColor = hover;
                win.style.borderColor 
= hover;
                obj.nextSibling.style.color 
= hover;
                sha.style.left 
= x1 + offx;
                sha.style.top  
= y1 + offy;
                moveable 
= true;
        }
}
//拖动;
function drag(obj)
{
        
if(moveable)
        {
                var win 
= obj.parentNode;
                var sha 
= win.nextSibling;
                win.style.left 
= x1 + event.clientX - x0;
                                sha.style.left 
= parseInt(win.style.left) + offx;
                                
if ((y1 + event.clientY - y0)>0 && (y1 + event.clientY - y0)<600){
                win.style.top  
= y1 + event.clientY - y0;
                sha.style.top  
= parseInt(win.style.top) + offy;
                }
        }
}
//停止拖动;
function stopDrag(obj)
{
        
if(moveable)
        {
                var win 
= obj.parentNode;
                var sha 
= win.nextSibling;
                var msg 
= obj.nextSibling;
                win.style.borderColor     
= normal;
                obj.style.backgroundColor 
= normal;
                msg.style.color           
= normal;
                sha.style.left 
= obj.parentNode.style.left;
                sha.style.top  
= obj.parentNode.style.top;
                obj.releaseCapture();
                moveable 
= false;
        }
}
//获得焦点;
function getFocus(obj)
{
        
if(obj.style.zIndex!=index)
        {
                index 
= index + 2;
                var idx 
= index;
                obj.style.zIndex
=idx;
                obj.nextSibling.style.zIndex
=idx-1;
        }
}
//最小化;
function min(obj)
{
        var win 
= obj.parentNode.parentNode;
        var sha 
= win.nextSibling;
        var tit 
= obj.parentNode;
        var msg 
= tit.nextSibling;
        var flg 
= msg.style.display=="none";
        
if(flg)
        {
                win.style.height  
= parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;
                sha.style.height  
= win.style.height;
                msg.style.display 
= "block";
                obj.innerHTML 
= "0";
        }
        
else
        {
                win.style.height  
= parseInt(tit.style.height) + 2*2;
                sha.style.height  
= win.style.height;
                obj.innerHTML 
= "2";
                msg.style.display 
= "none";
        }
}
//关闭;
function cls(obj)
{
        var win 
= obj.parentNode.parentNode.parentNode;
        
//var sha = win.nextSibling;
        win.style.visibility = "hidden";
        
//sha.style.visibility = "hidden";
}
//显示/隐藏;
function ShowHide()
{
        
if (xx!=null)
                        
if (xx.style.visibility == "hidden")
                                xx.style.visibility 
= "visible";
                        
else if (xx.style.visibility == "visible")
                                xx.style.visibility 
= "hidden";
}
//创建一个对象;
function xWin(id,w,h,l,t,tit,msg)
{
        index 
= index+2;
        
this.id      = id;
        
this.width   = w;
        
this.height  = h;
        
this.left    = l;
        
this.top     = t;
        
this.zIndex  = index;
        
this.title   = tit;
        
this.message = msg;
        
this.obj     = null;
        
this.bulid   = bulid;
        
this.bulid();
        xx 
= document.getElementById('allx');
        xx.style.visibility 
= "visible";

}
//初始化;
function bulid()
{
        var str 
= ""
                
+ "<div id='allx'><div id='xMsg'" + this.id + " "
                
+ "style='"
                
+ "z-index:" + this.zIndex + ";"
                
+ "width:" + this.width + ";"
                
+ "height:" + this.height + ";"
                
+ "left:" + this.left + ";"
                
+ "top:" + this.top + ";"
                
+ "background-color:" + normal + ";"
                
+ "color:" + normal + ";"
                
+ "font-size:11px;"
                
+ "font-family:Verdana;"
                
+ "position:absolute;"
                
+ "cursor:default;"
                
+ "border:2px solid " + normal + ";"
                
+ ""
                
+ "οnmοusedοwn='getFocus(this)'>"
                        
+ "<div "
                        
+ "style='"
                        
+ "background-color:" + normal + ";"
                        
+ "width:" + (this.width-2*2+ ";"
                        
+ "height:20;"
                        
+ "color:white;"
                        
+ ""
                        
+ "οnmοusedοwn='startDrag(this)' "
                        
+ "οnmοuseup='stopDrag(this)' "
                        
+ "οnmοusemοve='drag(this)' "
                        
+ "οndblclick='min(this.childNodes[1])'"
                        
+ ">"
                                
+ "<span style='width:" + (this.width-2*14-4+ ";padding-left:3px;'>" + this.title + "</span>"
                                
+ "<span style='width:14;border-width:0px;color:white;font-family:webdings;' οnclick='min(this)'>0</span>"
                                
+ "<span style='width:14;border-width:0px;color:white;font-family:webdings;' οnclick='cls(this)'>r</span>"
                        
+ "</div>"
                                
+ "<div style='"
                                
+ "width:100%;"
                                
+ "height:" + (this.height-20-4+ ";"
                                
+ "background-color:white;"
                                
+ "line-height:14px;"
                                
+ "word-break:break-all;"
                                
+ "padding:3px;"
                                
+ "'>" + this.message + "</div>"
                
+ "</div>"
                
+ "<div id='xshadow' style='"
                
+ "width:" + this.width + ";"
                
+ "height:" + this.height + ";"
                
+ "top:" + this.top + ";"
                
+ "left:" + this.left + ";"
                
+ "z-index:" + (this.zIndex-1+ ";"
                
+ "position:absolute;"
                
+ "background-color:black;"
                
+ "filter:alpha(opacity=40);"
                
+ "'>by wildwind</div></div>";
        document.getElementById(
'msgbox').innerHTML = str;
                
                
}
//-->
</script>

<script language='JScript'>
<!--
function initialize()
{
        var a 
= new xWin("1",460,400,200,200,"效果怎么样!","<br>aaaaaaaaaaaaaaaaaaaaaaaaa");

}
window.onload 
= initialize;
//-->
</script>
</head>
<body onselectstart='return false' oncontextmenu='return false' scroll='no'>


<DIV class=textSheet 
style
="BORDER-RIGHT: #3E8529 1px solid; BORDER-TOP: #639517 1px solid; BORDER-LEFT: #3E8529 1px solid; BORDER-BOTTOM: #3E8529 1px solid">

<table width="242" height="160" border="1" ID="Table2">

    
<td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080"  onMouseMove="bgColor='#ffff99'" onmouseout="bgColor='#FFFFFF'" onclick="ShowHide()">显示隐藏</td> 
</table>
</DIV>
<div id="msgbox"></div>
</body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值