仿CSDN 右下角悬挂的浮动层效果

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>ads</title> 
<style type="text/css"> 
body{ 
font-size:12px; 
margin:0px; 
} 
/**for ads**/ 
h1{ 
font-size:14px; 
} 
.ads{ 
margin:0px auto; 
width:325px; 
height:190px; 
border:1px solid #ddd; 
} 
</style> 
</head>

<body> 
<h1>CSDN右下角悬挂效果</h1> 
 
<style type="text/css"> 
#ads_14{ 
float:right; 
font-family: verdana,sans-serif; 
} 
#ads_14 H6 
{ 
width:282px; 
height:27px; 
padding:0px; 
margin:0px; 
background:url(images/skin/bg.gif) no-repeat; 
} 
#ads_14 #drag 
{ 
cursor:move; 
} 
#ads_14 #head 
{ 
float:right; 
width:45px; 
height:27px; 
line-height:27px; 
cursor:pointer; 
} 
#msg_top 
{ 
width:279px; 
height:105px; 
border-left:#CDCDCD 1px solid; 
border-right:#CDCDCD 1px solid; 
} 
ul 
{ 
padding:0px; 
margin:0px; 
list-style:none; 
} 
.msg_top_left 
{ 
float:left; 
width:80px; 
height:105px; 
padding-right:10px; 
border-bottom:#CDCDCD 1px dashed; 
} 
.msg_top_right 
{ 
float:left; 
width:175px; 
height:105px; 
padding-left:10px; 
border-bottom:#CDCDCD 1px dashed; 
} 
.msg_top_right a 
{ 
font-size:12px; 
text-decoration:none; 
line-height:20px; 
} 
#msg_buttom 
{ 
width:279px; 
height:100px; 
border-left:#CDCDCD 1px solid; 
border-right:#CDCDCD 1px solid; 
border-bottom:#CDCDCD 1px solid; 
} 
#msg_buttom ul 
{ 
float:left; 
width:120px; 
height:102px; 
line-height:20px; 
padding:5px; 
} 
</style> 
<div id="ads_14" class="ads_14"> 
<h6 id="drag"><div id="head"><em><img id="small" src="images/skin/small.gif" _ewebeditor_ta_src="images%2Fskin%2Fsmall.gif" border="0"></em><em>   </em><em><img id="close" src="images/skin/close.gif" _ewebeditor_ta_src="images%2Fskin%2Fclose.gif" border="0"></em></div></h6> 
<div id="msg_top"> 
<ul class="msg_top_left"> 
<li> 
<img src="images/skin/untitled.bmp" _ewebeditor_ta_src="images%2Fskin%2Funtitled.bmp"> 
</li> 
</ul> 
<ul class="msg_top_right"> 
<LI><A title="微软启动最严厉反盗版验证" href="http://g.csdn.net/5067111" _ewebeditor_ta_href="http%3A%2F%2Fg.csdn.net%2F5067111" target="_blank">微软启动最严厉反盗版验证</A></LI> 
<LI><A title="Mozilla建开发者工具实验室" href="http://g.csdn.net/5067110" _ewebeditor_ta_href="http%3A%2F%2Fg.csdn.net%2F5067110" target="_blank">Mozilla建开发者工具实验室</A></LI> 
<LI><A title="Google Apps安全漏洞揭秘" href="http://g.csdn.net/5067028" _ewebeditor_ta_href="http%3A%2F%2Fg.csdn.net%2F5067028" target="_blank">Google Apps安全漏洞揭秘</A></LI> 
<LI><A title="微软发布Silverlight2 " href="http://g.csdn.net/5067027" _ewebeditor_ta_href="http%3A%2F%2Fg.csdn.net%2F5067027" target="_blank">微软发布Silverlight2 </A></LI> 
<LI><A title="WinHEC邀您一起揭开Window7神秘面纱！" href="http://g.csdn.net/5067145" _ewebeditor_ta_href="http%3A%2F%2Fg.csdn.net%2F5067145" target="_blank">WinHEC邀您一起揭开Window</A></LI> 
</ul> 
</div> 
<div id="msg_buttom"> 
<ul> 
<li><a title="微软与您畅享[奇迹之旅]，精彩不容错过！" href="http://g.csdn.net/5067051" _ewebeditor_ta_href="http%3A%2F%2Fg.csdn.net%2F5067051" target="_blank">微软与您畅享[奇迹之</a></li> 
<li><a title="汽车信息化机遇与挑战" href="http://g.csdn.net/5065580" _ewebeditor_ta_href="http%3A%2F%2Fg.csdn.net%2F5065580" target="_blank">汽车信息化机遇与挑战</a></li> 
<li><a title="计算机程序的行为学" href="http://g.csdn.net/5065579" _ewebeditor_ta_href="http%3A%2F%2Fg.csdn.net%2F5065579" target="_blank">计算机程序的行为学</a></li> 
<li><a title="独立思考能力从哪里来" href="http://g.csdn.net/5065578" _ewebeditor_ta_href="http%3A%2F%2Fg.csdn.net%2F5065578" target="_blank">独立思考能力从哪里来</a></li> 
</ul> 
<ul> 
<li><a title="避免肥胖十五条法则" href="http://g.csdn.net/5065503" _ewebeditor_ta_href="http%3A%2F%2Fg.csdn.net%2F5065503" target="_blank">避免肥胖十五条法则</a></li> 
<li><a title="清明节第一次相亲" href="http://g.csdn.net/5065502" _ewebeditor_ta_href="http%3A%2F%2Fg.csdn.net%2F5065502" target="_blank">清明节第一次相亲</a></li> 
<li><a title="不要爱上论坛女人" href="http://g.csdn.net/5065501" _ewebeditor_ta_href="http%3A%2F%2Fg.csdn.net%2F5065501" target="_blank">不要爱上论坛女人</a></li> 
<li><a title="IBM" href="http://g.csdn.net/5065501" _ewebeditor_ta_href="http%3A%2F%2Fg.csdn.net%2F5065501" target="_blank">IBM</a></li> 
</ul> 
</div> 
</div> 
<div id="hidden"></div> 
 
 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%3E%20%0D%0Avar%20data%20%3D%20%7B%20%0D%0A'bs'%20%3A%20'http%3A%2F%2Fwww.test.com'%2C%20%0D%0A'as'%3A%20'http%3A%2F%2Flocalhost%2Fadsformat%2F'%2C%20%0D%0A'ad'%20%3A%5B%5B'2'%2C'images%2F2007032256654.jpg'%2C%20'rd%3Fgo%3DeJxNjk1rwz'%5D%5D%20%0D%0A%7D%3B%20%0D%0Afunction%20msgBox()%20%0D%0A%7B%20%0D%0Athis.container%20%3D%20%22ads_14%22%3B%20%0D%0Athis.dragArea%20%3D%20%22drag%22%3B%20%0D%0Athis.width%20%3D%20282%3B%20%0D%0Athis.height%20%3D%20235%3B%20%0D%0Athis.smallHeight%20%3D%2027%3B%20%0D%0Athis.smallId%20%3D%20%22small%22%3B%20%0D%0Athis.closeId%20%3D%20%22close%22%3B%20%0D%0Athis.area%20%3D%20(%20document.compatMode.toLowerCase()%3D%3D%22css1compat%22%20)%20%3F%20document.documentElement%20%3A%20document.body%3B%20%0D%0Athis.space%20%3D%2015%3B%20%0D%0Athis.timer%3B%20%0D%0Athis.timeOut%20%3D%20150%3B%20%0D%0Athis.smalled%20%3D%20false%3B%20%0D%0Awindow.msgBoxListener%20%3D%20this%3B%20%0D%0Athis.%24(this.smallId).onclick%3D%20function()%7BmsgBoxListener.toSmall()%7D%3B%20%0D%0Athis.%24(this.closeId).onclick%20%3D%20function()%7BmsgBoxListener.close()%7D%3B%20%0D%0A%7D%20%0D%0AmsgBox.prototype.flow%20%3D%20function()%20%0D%0A%7B%20%0D%0Athis.%24(this.container).style.position%20%3D%20%22absolute%22%3B%20%0D%0Athis.%24(this.container).style.zIndex%20%3D%20%221000%22%3B%20%0D%0Aif(this.smalled)%20%0D%0A%7B%20%0D%0Athis.%24(this.container).style.top%20%3D%20this.area.scrollTop%20%2B%20this.area.clientHeight%20-%20this.smallHeight%20-%20this.space%20%2B%20%22px%22%3B%20%0D%0A%7Delse%7B%20%0D%0Athis.%24(this.container).style.top%20%3D%20this.area.scrollTop%20%2B%20this.area.clientHeight%20-%20this.height%20-%20this.space%20%2B%20%22px%22%3B%20%0D%0A%7D%20%0D%0Athis.%24(this.container).style.left%20%3D%20this.area.scrollLeft%20%2B%20this.area.clientWidth%20-%20this.width%20-%20this.space%20%2B%20%22px%22%3B%20%0D%0A%7D%20%0D%0AmsgBox.prototype.toSmall%20%3D%20function()%20%0D%0A%7B%20%0D%0Aif(this.smalled)%20%0D%0A%7B%20%0D%0Athis.%24(this.smallId).src%20%3D%20%22images%2Fskin%2Fsmall.gif%22%3B%20%0D%0Athis.%24(this.container).style.marginTop%20%3D%20-this.height%20%2B%20%22px%22%3B%20%0D%0Athis.%24(this.container).style.height%20%3D%20this.height%20%2B%20%22px%22%3B%20%0D%0Athis.%24(this.container).style.overflow%20%3D%20%22hidden%22%3B%20%0D%0Athis.smalled%20%3D%20false%3B%20%0D%0Athis.flow()%3B%20%0D%0Athis.%24(this.container).style.marginTop%20%3D%20%220px%22%3B%20%0D%0A%7Delse%7B%20%0D%0Athis.%24(this.smallId).src%20%3D%20%22images%2Fskin%2Fbig.gif%22%3B%20%0D%0Athis.%24(this.container).style.height%20%3D%20this.smallHeight%20%2B%20%22px%22%3B%20%0D%0Athis.%24(this.container).style.overflow%20%3D%20%22hidden%22%3B%20%0D%0Athis.smalled%20%3D%20true%3B%20%0D%0Athis.flow()%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0AmsgBox.prototype.close%20%3D%20function()%20%0D%0A%7B%20%0D%0Adocument.body.removeChild(this.%24(this.container))%3B%20%0D%0A%7D%20%0D%0AmsgBox.prototype.auto%20%3D%20function()%20%0D%0A%7B%20%0D%0Athis.flow()%3B%20%0D%0Awindow%5B%22onresize%22%5D%3Dfunction()%7BmsgBoxListener.flow()%3B%7D%3B%20%0D%0Awindow%5B%22onscroll%22%5D%3Dfunction()%7BmsgBoxListener.flow()%3B%7D%3B%20%0D%0Adocument.onmousedown%20%3D%20function()%7BclearInterval(msgBoxListener.timer)%3BmsgBoxListener.drag(msgBoxListener.container%2C%20msgBoxListener.dragArea)%3B%7D%3B%20%0D%0A%7D%20%0D%0AmsgBox.prototype.drag%20%3D%20function(container%2C%20drag)%20%0D%0A%7B%20%0D%0Avar%20IMOUSEDOWN%20%3D%20true%3B%20%0D%0Avar%20isIE%20%3D%20(navigator.appVersion.indexOf(%22MSIE%22)%20!%3D%20-1)%20%3F%20true%20%3A%20false%3B%20%0D%0Acontainer%20%3D%20document.getElementById(container)%3B%20%0D%0Adrag%20%3D%20document.getElementById(drag)%3B%20%0D%0Aif(drag)%20%0D%0A%7B%20%0D%0Atry%7B%20%0D%0Aif(IMOUSEDOWN)%7B%20%0D%0Adrag.onmousedown%3Dfunction(a)%7B%20%0D%0Avar%20d%3Ddocument%3B%20%0D%0Aif(!a)a%3Dwindow.event%3B%20%0D%0Adrag.style.cursor%3D%22move%22%3B%20%0D%0Avar%20x%3Da.layerX%3Fa.layerX%3Aa.offsetX%2Cy%3Da.layerY%3Fa.layerY%3Aa.offsetY%3B%20%0D%0Aif(drag.setCapture)%20%0D%0Adrag.setCapture()%3B%20%0D%0Aelse%20if(window.captureEvents)%20%0D%0Awindow.captureEvents(Event.MOUSEMOVE%7CEvent.MOUSEUP)%3B%20%0D%0Ad.onmousemove%3Dfunction(a)%7B%20%0D%0Aif(!a)a%3Dwindow.event%3B%20%0D%0Aif(!a.pageX)a.pageX%20%3D%20(a.clientX%3C0%20%3F0%3Aa.clientX)%3B%20%0D%0Aif(!a.pageY)a.pageY%20%3D%20(a.clientY%20%3C0%20%3F0%3Aa.clientY)%3B%20%0D%0Avar%20tx%20%3D%20a.pageX-x%2C%20ty%20%3D%20a.pageY-y%3B%20%0D%0Aif(isIE)%7B%20%0D%0Aty%20%3D%20ty%20%2B%20document.documentElement.scrollTop%20-%20document.documentElement.clientTop%3B%20%0D%0A%7D%20%0D%0Acontainer.style.position%20%3D%20%22absolute%22%3B%20%0D%0Acontainer.style.left%20%3D%20tx%2B%22px%22%3B%20%0D%0Acontainer.style.top%20%3D%20ty%2B%22px%22%3B%20%0D%0A%7D%3B%20%0D%0Ad.onmouseup%3Dfunction()%7B%20%0D%0Aif(drag.releaseCapture)%20%0D%0Adrag.releaseCapture()%3B%20%0D%0Aelse%20if(window.captureEvents)%20%0D%0Awindow.captureEvents(Event.MOUSEMOVE%7CEvent.MOUSEUP)%3B%20%0D%0Ad.onmousemove%3Dnull%3B%20%0D%0Ad.onmouseup%3Dnull%3B%20%0D%0A%7D%3B%20%0D%0A%7D%3B%20%0D%0A%7Delse%7B%20%0D%0Acontainer.style.cursor%3D%22pointer%22%3B%20%0D%0Adrag.style.cursor%3D%22move%22%3B%20%0D%0A%7D%20%0D%0A%7Dcatch(e)%7B%20%0D%0Aalert(e)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0AmsgBox.prototype.%24%20%3D%20function(ele)%20%0D%0A%7B%20%0D%0Areturn%20document.getElementById(ele)%3B%20%0D%0A%7D%20%0D%0Avar%20msgBox1%20%3D%20new%20msgBox()%3B%20%0D%0AmsgBox1.auto()%3B%20%0D%0A%3C%2Fscript%3E"> 
 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程