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

更新时间：2008年12月17日 12:18:01 作者：

仿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" border="0"></em><em>&nbsp;&nbsp;&nbsp;</em><em><img id="close" src="images/skin/close.gif" border="0"></em></div></h6> <div id="msg_top"> <ul class="msg_top_left"> <li> <img src="images/skin/untitled.bmp"> </li> </ul> <ul class="msg_top_right"> <LI><A title="微软启动最严厉反盗版验证" href="http://g.csdn.net/5067111" target="_blank">微软启动最严厉反盗版验证</A></LI> <LI><A title="Mozilla建开发者工具实验室" href="http://g.csdn.net/5067110" target="_blank">Mozilla建开发者工具实验室</A></LI> <LI><A title="Google Apps安全漏洞揭秘" href="http://g.csdn.net/5067028" target="_blank">Google Apps安全漏洞揭秘</A></LI> <LI><A title="微软发布Silverlight2 " href="http://g.csdn.net/5067027" target="_blank">微软发布Silverlight2 </A></LI> <LI><A title="WinHEC邀您一起揭开Window7神秘面纱！" href="http://g.csdn.net/5067145" target="_blank">WinHEC邀您一起揭开Window</A></LI> </ul> </div> <div id="msg_buttom"> <ul> <li><a title="微软与您畅享[奇迹之旅]，精彩不容错过！" href="http://g.csdn.net/5067051" target="_blank">微软与您畅享[奇迹之</a></li> <li><a title="汽车信息化机遇与挑战" href="http://g.csdn.net/5065580" target="_blank">汽车信息化机遇与挑战</a></li> <li><a title="计算机程序的行为学" href="http://g.csdn.net/5065579" target="_blank">计算机程序的行为学</a></li> <li><a title="独立思考能力从哪里来" href="http://g.csdn.net/5065578" target="_blank">独立思考能力从哪里来</a></li> </ul> <ul> <li><a title="避免肥胖十五条法则" href="http://g.csdn.net/5065503" target="_blank">避免肥胖十五条法则</a></li> <li><a title="清明节第一次相亲" href="http://g.csdn.net/5065502" target="_blank">清明节第一次相亲</a></li> <li><a title="不要爱上论坛女人" href="http://g.csdn.net/5065501" target="_blank">不要爱上论坛女人</a></li> <li><a title="IBM" href="http://g.csdn.net/5065501" target="_blank">IBM</a></li> </ul> </div> </div> <div id="hidden"></div>   <script language="javascript"> var data = { 'bs' : 'http://www.test.com', 'as': 'http://localhost/adsformat/', 'ad' :[['2','images/2007032256654.jpg', 'rd?go=eJxNjk1rwz']] }; function msgBox() { this.container = "ads_14"; this.dragArea = "drag"; this.width = 282; this.height = 235; this.smallHeight = 27; this.smallId = "small"; this.closeId = "close"; this.area = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body; this.space = 15; this.timer; this.timeOut = 150; this.smalled = false; window.msgBoxListener = this; this.$(this.smallId).onclick= function(){msgBoxListener.toSmall()}; this.$(this.closeId).onclick = function(){msgBoxListener.close()}; } msgBox.prototype.flow = function() { this.$(this.container).style.position = "absolute"; this.$(this.container).style.zIndex = "1000"; if(this.smalled) { this.$(this.container).style.top = this.area.scrollTop + this.area.clientHeight - this.smallHeight - this.space + "px"; }else{ this.$(this.container).style.top = this.area.scrollTop + this.area.clientHeight - this.height - this.space + "px"; } this.$(this.container).style.left = this.area.scrollLeft + this.area.clientWidth - this.width - this.space + "px"; } msgBox.prototype.toSmall = function() { if(this.smalled) { this.$(this.smallId).src = "images/skin/small.gif"; this.$(this.container).style.marginTop = -this.height + "px"; this.$(this.container).style.height = this.height + "px"; this.$(this.container).style.overflow = "hidden"; this.smalled = false; this.flow(); this.$(this.container).style.marginTop = "0px"; }else{ this.$(this.smallId).src = "images/skin/big.gif"; this.$(this.container).style.height = this.smallHeight + "px"; this.$(this.container).style.overflow = "hidden"; this.smalled = true; this.flow(); } } msgBox.prototype.close = function() { document.body.removeChild(this.$(this.container)); } msgBox.prototype.auto = function() { this.flow(); window["onresize"]=function(){msgBoxListener.flow();}; window["onscroll"]=function(){msgBoxListener.flow();}; document.onmousedown = function(){clearInterval(msgBoxListener.timer);msgBoxListener.drag(msgBoxListener.container, msgBoxListener.dragArea);}; } msgBox.prototype.drag = function(container, drag) { var IMOUSEDOWN = true; var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false; container = document.getElementById(container); drag = document.getElementById(drag); if(drag) { try{ if(IMOUSEDOWN){ drag.onmousedown=function(a){ var d=document; if(!a)a=window.event; drag.style.cursor="move"; var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY; if(drag.setCapture) drag.setCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); d.onmousemove=function(a){ if(!a)a=window.event; if(!a.pageX)a.pageX = (a.clientX<0 ?0:a.clientX); if(!a.pageY)a.pageY = (a.clientY <0 ?0:a.clientY); var tx = a.pageX-x, ty = a.pageY-y; if(isIE){ ty = ty + document.documentElement.scrollTop - document.documentElement.clientTop; } container.style.position = "absolute"; container.style.left = tx+"px"; container.style.top = ty+"px"; }; d.onmouseup=function(){ if(drag.releaseCapture) drag.releaseCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); d.onmousemove=null; d.onmouseup=null; }; }; }else{ container.style.cursor="pointer"; drag.style.cursor="move"; } }catch(e){ alert(e); } } } msgBox.prototype.$ = function(ele) { return document.getElementById(ele); } var msgBox1 = new msgBox(); msgBox1.auto(); </script>  </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

对联广告可关闭
对联广告可关闭...
2006-08-08
漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)
偶然浏览网上发现一款非常漂亮的幻灯片效果代码，特给大家整理了下，非常漂亮的tab 幻灯片效果代码，里面是js类实现的，可以修改
2008-12-12
javascript显弹效果代码增加了cookies控制
用javascript实现的显弹效果代码，主要结合了网上广告系统的效果代码，并由脚本之家站长增加了cookies控制效果
2008-05-05
提示广告代码
[蓝色]提示广告代码...
2006-11-11
javascript 单行文字向上跑马灯滚动显示
有时候我们需要在网站某个小角落或者显著的位置加一条链接，但是当同类链接越来越多的时候，我们就需要将链接滚动显示，这里的滚动不是我们平常所说公告栏滚动效果，而是滚动一行停留一段时间再滚动下一行的看似一帧一帧切换的效果。
2009-08-08
js右下角弹出窗口,点击可关闭效果
广告中经常用到的效果，大家可以测试下
2008-09-09
对联浮动广告效果
对联浮动广告效果...
2006-07-07
js 居中漂浮广告
整个实现最重要的就是控制广告距离文档(非窗口)最顶部的距离.(scrollTop + browser.clientHeight).这里提供了获取这几个值的代码.
2010-03-03
给网站上的广告“加速”显示的方法
给网站上的广告“加速”显示的方法...
2007-04-04
float ad浮动广告代码
float ad浮动广告代码...
2007-01-01