我现在需要做一个浮动广告。就像www.sina.com右下角那个层一样的效果。
但是有要求，各游览器兼容。跨语言。
全部代码都用javascript写，层也要是javascript生成的。
我想在层上加几个超链
最后只要黏贴代码放到页面最后就能使用的。
我自己想是用javascript最合适了，但现在我自己做的一个，他不能随滚动条滚动。
给个例子让我参考。
谢谢
但是有要求，各游览器兼容。跨语言。
全部代码都用javascript写，层也要是javascript生成的。
我想在层上加几个超链
最后只要黏贴代码放到页面最后就能使用的。
我自己想是用javascript最合适了，但现在我自己做的一个，他不能随滚动条滚动。
给个例子让我参考。
谢谢
var width = document.body.clientWidth;
var height = document.body.clientHeight; var divWidth = 200;
var divHeight = 100;
var div = document.createElement("div");
div.setAttribute("id", "ShowDiv");
div.style.zIndex = 99;
div.style.width = divWidth + "px";
div.style.height = divHeight+"px";
div.style.position = "absolute";
div.style.backgroundColor = "Red";
div.innerHTML = "HELLO";
div.style.top = (height - divHeight) + "px";
div.style.left = (width - divWidth) + "px";
document.body.appendChild(div); window.onresize = function() {
width = document.body.clientWidth;
height = document.body.clientHeight;
var showDiv = document.getElementById("ShowDiv");
showDiv.style.top = height - divHeight + "px";
showDiv.style.left = width - divWidth + "px";
}
window.onscroll = function() {
width = document.body.clientWidth;
height = document.body.clientHeight;
var showDiv = document.getElementById("ShowDiv");
showDiv.style.top = height - divHeight + document.body.scrollTop + "px";
showDiv.style.left = width - divWidth + "px";
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style>
a{ text-decoration:none; border:0}
body,p,span,h1,h2,h3,h4,h5,h6,ul,li,table,tr,th,td,em,div,form,label{ margin:0; padding:0; font-size:12px; font-family:Arial;}
.message_layer_wrap{ width:195px; border:1px solid #a1ccfe; }
.message_layer_wrap .message_title{ height:22px; line-height:22px; margin:1px; background:#ebf4fc; color:#626262; }
.message_title_link{ cursor:hand; cursor:pointer;}
.message_layer_wrap .message_title .message_title_img{ float:left; padding:4px; line-height:18px;}
.message_layer_wrap .message_title p{ float:right; padding:5px; line-height:17px;}
.message_layer_wrap .message_title .message_news{ line-height:22px; float:left; margin:-1px 0 0 0; margin:1px 0 0 0\9;}
.message_layer_content{ background:url(http://www.cnblogs.com/images/cnblogs_com/jiayin2009/203894/o_message_bg01.gif) no-repeat; width:195px; height:77px; border-top:1px solid #a1ccfe;}
.message_layer_content .message_left{ background:url(http://www.cnblogs.com/images/cnblogs_com/jiayin2009/203894/o_message_pic02.gif) no-repeat left 15px;margin:0 0 0 16px; width: 120px; padding:13px 0 0 21px; line-height:18px;}
.message_layer_content p{ text-align:center; line-height:18px; padding:7px 0 0 0;}
</style>
</head> <body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<script type="text/javascript">
var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };var isIE = navigator.userAgent.indexOf('MSIE') != -1;var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == "6");var $d = (document.compatMode == "CSS1Compat") ? document.documentElement : document.body;var addEvent = function(otarget, stype, fnhandler){
otarget.attachEvent ? otarget.attachEvent("on"+stype, fnhandler) : otarget.addEventListener(stype, fnhandler, false);
}var CurrentStyle = function(element){
return element.currentStyle || element.ownerDocument.defaultVeiw(element, null);
}var Bind = function(object, fun){
var args = Array.prototype.slice.call(arguments).slice(2);
return function(){
return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
}
}var Extend = function(distination, source){
for(var property in source){
distination[property] = source[property];
}
return distination;
}var Class = {
create: function(){
return function(){
this.initialize.apply(this, arguments);
}
}
}
var ShortMsg = Class.create();
ShortMsg.prototype = {
initialize: function(msgbox, options){
this.MsgBox = $(msgbox);
this.SetOptions(options);
this._step = this.options.Step;
this._speed = this.options.Speed;
this._timer = null;
}, SetOptions: function(options){
this.options = {
Step: 2,
Speed: 50
};
Extend(this.options, options || {});
}, MoveMsgBox: function(){ // 主要是这个函数 在IE6下会有问题
var self = this;
this.ofsHeight = this.MsgBox.offsetHeight;
self.MsgBox.style.height = 0; // 初始化高度为0
self._timer = setInterval(function(){
if(parseInt(self.MsgBox.style.height ,10) < self.ofsHeight){
self.MsgBox.style.height = (parseInt(self.MsgBox.style.height, 10) + self._step) + "px"; //在这里追加高度同时减小top值.但在IE6下如果滚动条拖到最下面设置高度为0好像没有用...
self.MsgBox.style.top = (parseInt(self.MsgBox.style.top, 10) - self._step) + "px";
}else{
clearInterval(self._timer);
}
},self._speed)
}, ShowMsgBox: function(){
var iWidth = isIE6 ? ($d.scrollLeft + $d.clientWidth) : $d.clientWidth;
var iHeight = isIE6 ? ($d.scrollTop + $d.clientHeight) : $d.clientHeight;
this.MsgBox.style.left = (iWidth - this.MsgBox.offsetWidth) + "px";
this.MsgBox.style.top = (iHeight - this.MsgBox.offsetHeight) + "px";
}, Init: function(){
this.MsgBox.style.left = ($d.scrollLeft + $d.clientWidth - this.MsgBox.offsetWidth) + "px";
this.MsgBox.style.top = ($d.scrollTop + $d.clientHeight) + "px";
this.MsgBox.style.position = !isIE6 ? "fixed" : "absolute";
if(isIE6){
addEvent(window, "scroll", Bind(this,this.ShowMsgBox));
}
this.MoveMsgBox();
addEvent(window, "resize", Bind(this, this.ShowMsgBox));
}
}
</script>
<!--wrap start-->
<div class="message_layer_wrap" id="msgbox" >
<!--title start-->
<div class="message_title">
<div class="message_title_link">
<div class="message_title_img"><img src="http://www.cnblogs.com/images/cnblogs_com/jiayin2009/203894/o_message_pic05.gif" /></div>
<div class="message_news">新消息</div>
</div>
<p><a href="#"><img src="http://www.cnblogs.com/images/cnblogs_com/jiayin2009/203894/o_chahao.gif" /></a></p>
<div class="clear"></div>
</div>
<!--title end-->
<!--content start-->
<div class="message_layer_content">
<div class="message_left">1111</div>
</div>
<!--content end-->
</div>
<!--wrap end-->
<script type="text/javascript">
<!--
var SM = new ShortMsg('msgbox');
SM.Init();
//-->
</script>
</body>
</html>
http://www.lxasp.com/jquery/demo/floatfixbox/right-bottom-tip-demo3.htm