[代码收集]JavaScript仿新浪博客的右下角窗口代码(最小化/关闭) - 笑忘书网页代码收藏馆 - 35230.WODEMO.COM

首页-代码 2014-02-21 19:06:01 -0500

★JavaScript仿新浪博客的右下角窗口代码(最小化/关闭)★

请勿抄袭本页面

代码说明

仿新浪博客的右下角弹出窗口，Javascript妙味课堂的教学范例，在兼容性和操作舒适度方面做的相当不错。调用了几张外部的图片，使用时自行下载吧。转自源码爱好者

html代码

<style>
.float_layer{
width:240px;border:2px solid blue;background:lightskyblue;border-radius:15px;}
.float_layer h2{
height:25px;line-height: 25px; padding-left: 10px; font-size: 16px; color: #333; background: url(http://www.codefans.net/jscss/demoimg/201105/title_bg.gif) repeat-x 0 0; border-bottom: 1px solid #aaaaaa;
}
.float_layer .min{
width: 21px; height: 20px; background: url(http://www.codefans.net/jscss/demoimg/201105/min.gif) no-repeat 0 bottom;position:fixed;right:26px;
}
.float_layer .min:hover{ background: url(http://www.codefans.net/jscss/demoimg/201105/min.gif) no-repeat 0 0;position:fixed;right:26px;
}
.float_layer .max{
width: 21px; height: 20px; background: url(http://www.codefans.net/jscss/demoimg/201105/max.gif) no-repeat 0 bottom; position: fixed;right: 26px; }
.float_layer .max:hover { background: url(http://www.codefans.net/jscss/demoimg/201105/max.gif) no-repeat 0 0;position:fixed;right:26px;
}
.float_layer .close{
width: 21px; height: 20px; background: url(http://www.codefans.net/jscss/demoimg/201105/close.gif) no-repeat 0 bottom; position: fixed;right: 4px;
}
.float_layer .close:hover { background: url(http://www.codefans.net/jscss/demoimg/201105/close.gif) no-repeat 0 0;position:fixed;right:4px;
} 
.float_layer .content{
height: 120px; overflow: hidden; font-size: 14px; line-height: 18px; color: #666; text-indent: 28px;
}
.float_layer .wrap{
padding: 10px;
} 
</style>
<script>
 function miaovAddEvent(oEle, sEventName, fnHandler)
{
	if(oEle.attachEvent)
	{
		oEle.attachEvent('on'+sEventName, fnHandler);
	}
	else
	{
		oEle.addEventListener(sEventName, fnHandler, false);
	}
}
window.onload = function()
{
	var oDiv=document.getElementById('miaov_float_layer');
	var oBtnMin=document.getElementById('btn_min');
	var oBtnClose=document.getElementById('btn_close');
	var oDivContent=oDiv.getElementsByTagName('div')[0];
	
	var iMaxHeight=0;
	
	var isIE6=window.navigator.userAgent.match(/MSIE 6/ig) && !window.navigator.userAgent.match(/MSIE 7|8/ig);
	
	oDiv.style.display='block';
	iMaxHeight=oDivContent.offsetHeight;
	
	if(isIE6)
	{
		oDiv.style.position='absolute';
		repositionAbsolute();
		miaovAddEvent(window, 'scroll', repositionAbsolute);
		miaovAddEvent(window, 'resize', repositionAbsolute);
	}
	else
	{
		oDiv.style.position='fixed';
		repositionFixed();
		miaovAddEvent(window, 'resize', repositionFixed);
	}
	
	oBtnMin.timer=null;
	oBtnMin.isMax=true;
	oBtnMin.onclick=function ()
	{
		startMove
		(
			oDivContent, (this.isMax=!this.isMax)?iMaxHeight:0,
			function ()
			{
				oBtnMin.className=oBtnMin.className=='min'?'max':'min';
			}
		);
	};
	
	oBtnClose.onclick=function ()
	{
		oDiv.style.display='none';
	};
};
function startMove(obj, iTarget, fnCallBackEnd)
{
	if(obj.timer)
	{
		clearInterval(obj.timer);
	}
	obj.timer=setInterval
	(
		function ()
		{
			doMove(obj, iTarget, fnCallBackEnd);
		},30
	);
}
function doMove(obj, iTarget, fnCallBackEnd)
{
	var iSpeed=(iTarget-obj.offsetHeight)/8;
	
	if(obj.offsetHeight==iTarget)
	{
		clearInterval(obj.timer);
		obj.timer=null;
		if(fnCallBackEnd)
		{
			fnCallBackEnd();
		}
	}
	else
	{
		iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
		obj.style.height=obj.offsetHeight+iSpeed+'px';
		
		((window.navigator.userAgent.match(/MSIE 6/ig) && window.navigator.userAgent.match(/MSIE 6/ig).length==2)?repositionAbsolute:repositionFixed)()
	}
}
function repositionAbsolute()
{
	var oDiv=document.getElementById('miaov_float_layer');
	var left=document.body.scrollLeft||document.documentElement.scrollLeft;
	var top=document.body.scrollTop||document.documentElement.scrollTop;
	var width=document.documentElement.clientWidth;
	var height=document.documentElement.clientHeight;
	
	oDiv.style.left=left+width-oDiv.offsetWidth+'px';
	oDiv.style.top=top+height-oDiv.offsetHeight+'px';
}
function repositionFixed()
{
	var oDiv=document.getElementById('miaov_float_layer');
	var width=document.documentElement.clientWidth;
	var height=document.documentElement.clientHeight;
	
	oDiv.style.left=width-oDiv.offsetWidth+'px';
	oDiv.style.top=height-oDiv.offsetHeight+'px';
}
</script> 
<div class="float_layer" id="miaov_float_layer">
    <h2>
<strong>温馨提示</strong><a id="btn_min" href="javascript:;" class="min"></a><a id="btn_close" href="javascript:;" class="close"></a>
    </h2>
    <div class="content">
    	<div class="wrap">
        	欢迎访问 <span style="color:red;"><strong>笑忘书网盘</strong></span>！<br>更多精彩内容等待你来发现，建议将本站(<a href="ext:add_favorite">存为书签</a>)<br><br><span style="color:green;">提示: 点击右上角可关闭本窗口</span><br>
        </div>
     </div>
</div>

title_bg.gif (0.17 KiB) | Meta

min.gif (0.44 KiB) | Meta

max.gif (0.15 KiB) | Meta

close.gif (0.49 KiB) | Meta

代码演示

请看页面右下角窗口

温馨提示

欢迎访问 笑忘书网盘！
更多精彩内容等待你来发现，建议将本站(存为书签)

提示: 点击右上角可关闭本窗口

[代码仅供参考，转载请注明出处]

----Comments(4)----
幻龙 (@fhl) | @ at 2014-02-22 02:51:
就是代码太长啦！

幻龙 (@fhl) | @ at 2014-02-22 02:51:
真的很不错。。

翱翔的雄鹰 (@axdxy) | @ at 2014-02-21 19:15:
不错

笑忘书 (@35230) | @ at 2014-02-21 19:14:
这个是很久以前发过的，现在重新修改再发

Subscribe | Register | Login | N