记录几个使用位置的例子。

傷城~ 2022-08-24 05:14 172阅读 0赞

一个居右低的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.οnresize=change 
window.οnscrοll=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.csdn.net/app\_uploads/wtcsy/20081210/111117096.t.gif][http_album.hi.csdn.net_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.csdn.net/app\_uploads/wtcsy/20081210/111306658.t.gif][http_album.hi.csdn.net_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.csdn.net/app\_uploads/wtcsy/20081210/111406221.t.gif);width:245px][http_album.hi.csdn.net_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.csdn.net/app\_uploads/wtcsy/20081210/111341002.t.gif][http_album.hi.csdn.net_app_uploads_wtcsy_20081210_111341002.t.gif]" 
 img.οnclick=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.csdn.net/app\_uploads/wtcsy/20081210/165559580.t.gif][http_album.hi.csdn.net_app_uploads_wtcsy_20081210_165559580.t.gif]" 
 cimg.οnclick=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.οnresize=change 
window.οnscrοll=function()\{if(!obj) return;obj.style.top=top+document.body.scrollTop;obj.style.left=left+document.body.scrollLeft\} 
</script> 
</html>

[http_album.hi.csdn.net_app_uploads_wtcsy_20081210_111406221.t.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081210/111406221.t.gif
[http_album.hi.csdn.net_app_uploads_wtcsy_20081210_111341002.t.gif_img]: http://album.hi.csdn.net/app_uploads/wtcsy/20081210/111341002.t.gif"><img
[http_album.hi.csdn.net_app_uploads_wtcsy_20081210_111306658.t.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081210/111306658.t.gif
[http_album.hi.csdn.net_app_uploads_wtcsy_20081210_111117096.t.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081210/111117096.t.gif
[http_album.hi.csdn.net_app_uploads_wtcsy_20081210_111406221.t.gif_width_245px]: http://album.hi.csdn.net/app_uploads/wtcsy/20081210/111406221.t.gif%29;width:245px
[http_album.hi.csdn.net_app_uploads_wtcsy_20081210_111341002.t.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081210/111341002.t.gif
[http_album.hi.csdn.net_app_uploads_wtcsy_20081210_165559580.t.gif]: http://album.hi.csdn.net/app_uploads/wtcsy/20081210/165559580.t.gif