仿CSDN 右下角悬挂的浮动层效果
ads
body{
font-size:12px;
margin:0px;
}
/**for ads**/
h1{
font-size:14px;
}
.ads{
margin:0px auto;
width:325px;
height:190px;
border:1px solid #ddd;
}
CSDN右下角悬挂效果
#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;
}
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
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]