居右浮窗效果-优快云博客

一个居右低的div(稍微完整点的)

也不怎么完整关闭后一栓心又会出来,按道理来说应该是每天出来一次才对,这个结合后台来处理会简单的多

但是也可以用纯js,不过对cookie操作较多,(至少要记录是否打开和时间),cookie我很弱,就没有写这个了。。。。。

<div id="content" class="content"></div>
</div>
</body>
<script>
var i=0
var Opacity=(document.all)?100:1
var div = document.getElementById("all")
var top = document.body.clientHeight-div.offsetHeight
function change()
{
 div.style.left=document.body.clientWidth-div.offsetWidth+"px"
 div.style.top =document.body.clientHeight-div.offsetHeight+document.body.scrollTop+"px"
 top = document.body.clientHeight-div.offsetHeight
}
change()
window.onresize=change
window.onscroll=function(){top=document.body.clientHeight-div.offsetHeight;div.style.top=top+document.body.scrollTop+"px"}

function show(obj){
var timer
var img = obj
if(obj.xx==null){obj.xx=true}
if(obj.xx==true)
{
if(i>=document.getElementById("content").offsetHeight)
 {
 clearTimeout(timer)
obj.xx=false
document.getElementById('content').style.display = "none"
 document.getElementById('ss').src="http://album.hi.youkuaiyun.com/app_uploads/wtcsy/20081210/111117096.t.gif"
 }
else
 {
 div.style.top=parseInt(div.style.top)+10
 i=i+10
 timer = setTimeout("show(document.getElementById('ss'))",10)
 }
}
else
{
if(i<=0)
 {
 clearTimeout(timer)
 obj.xx=true
 document.getElementById('ss').src="http://album.hi.youkuaiyun.com/app_uploads/wtcsy/20081210/111306658.t.gif"
 }
else
 {
 document.getElementById('content').style.display = "block"
 div.style.top=parseInt(div.style.top)-10
 i=i-10
 timer = setTimeout("show('"+obj+"')",10)
 }
}
}

function display(){
if(Opacity>0)
{
if(document.all)
{
div.style.filter="Alpha(Opacity="+Opacity+")"
Opacity=Opacity-10
}
else
{
div.style.opacity=Opacity
Opacity=Opacity-0.1
}
timer = setTimeout("display()",20)
}
else
{document.body.removeChild(document.getElementById("all"))}
}
</script>

模拟的LightBox 觉得没什么难度其实还有些是要注意的。

比如当宽度或者是长度过长的时候要用的是document.body.scrollHeight或者Width

要加一个iframe ie6下 select的bug iframe不要有border ff下会有问题就这个问题找了半天

Ps:这里是模拟的事实上position:fixed就可以解决但是ie6不支持这个。。。

<html>
<style type="text/css">
.div{ left:0px; top:0px; position:absolute; z-index:2;filter:Alpha(opacity=80);opacity:0.8; background-color: #FFFFFF}
.div1{ height:auto; width:250px;border:1px solid #567AB4;position:absolute; z-index:5; left:0px; top:0px}
.divtitle{height:21px !important; height:26px; background-image:url(http://album.hi.youkuaiyun.com/app_uploads/wtcsy/20081210/111406221.t.gif);width:245px !important; width:250px; font-size:12px; font-weight:bold; color:#FFFFFF; padding:5px 0 0 5px;}
.span{ float:left}
.img{ float:right; margin-right:7px}
.divcontent{ height:100px; background-color:#FFFFFF; width:250px;}
.cimg{ margin-top:38px; margin-left:90px;}
</style>

<input name="" type="text"> <select name=""></select> </body>
<script>
var obj,top,left
function Open(){
var div = document.createElement("div");
 div.className = "div"
div.id = "div"
 div.innerHTML="<iframe style='position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0); border:0px'></iframe>"
 div.style.height=Math.max(document.body.scrollHeight, document.body.clientHeight)
div.style.width=Math.max(document.body.scrollWidth, document.body.clientWidth)
 //div.style.width=Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)
 document.body.appendChild(div)
var div1 = document.createElement("div");
 div1.className = "div1"
div1.id="div1"
 document.body.appendChild(div1)
var divtitle = document.createElement("div");
 divtitle.className = "divtitle"
 div1.appendChild(divtitle)
var span = document.createElement("span");
 span.innerHTML="提示信息"
span.className="span"
divtitle.appendChild(span)
var img = document.createElement("img");
 img.className = "img"
img.src = "http://album.hi.youkuaiyun.com/app_uploads/wtcsy/20081210/111341002.t.gif"
img.onclick=function(){document.body.removeChild(div);document.body.removeChild(div1)}
 divtitle.appendChild(img)
var divcontent = document.createElement("div");
 divcontent.className="divcontent"
div1.appendChild(divcontent)
var cimg = document.createElement("img");
 cimg.className = "cimg"
cimg.src = "http://album.hi.youkuaiyun.com/app_uploads/wtcsy/20081210/165559580.t.gif"
cimg.onclick=function(){document.body.removeChild(div);document.body.removeChild(div1)}
 divcontent.appendChild(cimg)
obj = document.getElementById("div1")
top = (document.body.clientHeight-div.offsetHeight)/2
left = (document.body.clientWidth-div.offsetWidth)/2
change()
}

function change()
{
   if(!obj) return;
   //document.getElementById("div").style.width="100%"
document.getElementById("div").style.width= Math.max(parseInt(document.getElementById("div").style.width),document.body.clientWidth)
   obj.style.left=(document.body.clientWidth-obj.offsetWidth)/2
   obj.style.top =(document.body.clientHeight-obj.offsetHeight)/2+document.body.scrollTop
   top = (document.body.clientHeight-obj.offsetHeight)/2
   left = (document.body.clientWidth-obj.offsetWidth)/2
}

window.onresize=change
window.onscroll=function(){if(!obj) return;obj.style.top=top+document.body.scrollTop;obj.style.left=left+document.body.scrollLeft}
</script>
</html>