0顶

简便的弹出窗口特效

稿源：互联网 2022-04-02 21:41:05 点击： 6334 撤稿纠错

点击链接弹出窗口，兼容当前主流浏览器。

以下讨论的是和弹出相关的简便的弹出窗口特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 兼容各种浏览器且使用简便的弹出窗口 站长特效网</title>
<style type="text/css">
body{margin:0px;padding:0px}
input{margin:5px;padding:0px;border:1px solid #000;}
</style>
<script type="text/javascript">
var MyWin = new Win();
var imgfile = "http://www.zzjs.net/img/1/";//设置图片路径，相对或绝对都行
var imgname=new Array();
var img = new Array();
//预先加载图片
imgname[0] = imgfile+"clo.gif";
imgname[1] = imgfile+"b1.png";
imgname[2] = imgfile+"l1.png";
imgname[3] = imgfile+"l2.png";
imgname[4] = imgfile+"r1.png";
imgname[5] = imgfile+"r2.png";
imgname[6] = imgfile+"t1.png";
imgname[7] = imgfile+"t2.png";
imgname[8] = imgfile+"t3.png";
//预读图片
for (i=0;i<=imgname.length-1;i++)
{
   img[i] = new Image();
   img[i].src = imgname[i];
}//欢迎来到站长特效网，b我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
var zIndex = 0;
var Winid  = 0;
var Ie = /msie/i.test(navigator.userAgent);
function $(Id){return(document.getElementById(Id))}
function Win()
{//欢迎来c到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 this.Create = function(mask,title, wbody, w, h, l, t)
 {
  Winid++;
  mask = mask;
  title = title || "站长特效网－加载中…";
  wbody = wbody || " <p align='center'>正在载入…</p>";
  w = w || 350;
  h = h || 150;
  cw = document.documentElement.clientWidth;
  ch = document.documentElement.clientHeight;
  sw = document.documentElement.scrollWidth;
  sh = document.documentElement.scrollHeight;
        st = (document.documentElement.scrollTop || document.body.scrollTop);
  if (w > cw)
  ww = 0;
  else
  ww = (cw - w)/2;
  if (h > ch)
  hh = 0;
  else
  hh = (st + (ch - h)/2);
  l = l || ww;
  t = t || hh;
        if (mask != "no"){
    var ndiv = document.createElement("DIV");
    ndiv.setAttribute("id", "ndiv"+ Winid);
    ndiv.style.cssText = "width:"+ sw +"px;height:"+ sh +"px;left:0px;top:0px;position:absolute;overflow:hidden;background:#fff;filter:alpha(opacity=20); opacity:0.2;-moz-opacity:0.2;";
    document.body.appendChild(ndiv);
    if (Ie)
    {
    var niframe = document.createElement("iframe");
    niframe.style.width = sw;
    niframe.style.height = sh;
          niframe.style.top = "0px";
          niframe.style.left = "0px";
          niframe.style.visibility = "inherit";
          niframe.style.filter = "alpha(opacity=0)";
          niframe.style.position = "absolute";
          niframe.style.zIndex = -1;
    ndiv.insertAdjacentElement("afterBegin",niframe);
    }
        }
  var mywin = document.createElement("DIV");
  mywin.setAttribute("id", "win"+ Winid);
  mywin.style.cssText = "width:"+ w +"px;height:"+ h +"px;left:0px;top:0px;position:absolute;overflow:hidden;padding:0px;font-family:Arial, 宋体";
  mywin.style.zIndex = ++zIndex;
  document.body.appendChild(mywin);
  var mytie = document.createElement("DIV");
  var myboy = document.createElement("DIV");
  var mybom = document.createElement("DIV");
  mytie.style.cssText = "overflow:hidden;height:30px;font-weight:bold;font-size:14px;width:100%";
  myboy.style.cssText = "overflow:hidden;width:100%";
  mybom.style.cssText = "overflow:hidden;height:30px;width:100%";
  mywin.appendChild(mytie);
  mywin.appendChild(myboy);
  mywin.appendChild(mybom);
  var wintag = [[mytie, 30, 15, "t1"], [mytie, 30, w-30, "t2"], [mytie, 30, 15, "t3"], [myboy, h-45, 15, "l1"], [myboy, h-47, w-32], [myboy, h-45, 15, "r1"], [mybom, 15, 15, "l2"], [mybom, 15, w-30, "b1"], [mybom, 15, 15, "r2"]];
  for (var i = 0; i < 9; i++)
  {
   var temp = document.createElement("DIV");
   temp.setAttribute("Fid", "win"+ Winid);
   wintag[i][0].appendChild(temp);
      if (wintag[i][3])
   {
    temp.style.cssText = "float:left;height:"+ wintag[i][1] +"px;width:"+ wintag[i][2] +"px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+imgfile+""+ wintag[i][3] +".png', sizingMethod='scale');background:url('"+imgfile+""+ wintag[i][3] +".png') !important;background:;";
   }
   else
   {
    temp.style.cssText = "float:left;filter:alpha(Opacity=95,style=0);opacity:0.95;height:"+ wintag[i][1] +"px;width:"+ wintag[i][2] +"px;background:#f7f7f7;border:1px solid #666;overflow:hidden;padding:0px";
   }
  }
  mytie.childNodes[1].innerHTML = "<div style="position:absolute;overflow:hidden;height:15px;top:12px;padding-left:4px;padding-right:4px;"></div><div style="position:absolute;background:url('"+imgfile+"clo.gif');overflow:hidden;width:43px;height:17px;top:7px !important;right:15px" title="关闭窗口" onclick="MyWin.Close('win"+ Winid +"',10); MyWin.ndiv('ndiv"+ Winid +"',10);"></div>";
  this.Title("win"+ Winid, title);
  this.Body("win"+ Winid, wbody);
  this.Move_e("win"+ Winid, l, t, 0, 0);
  return(mywin);
 }
 this.Title = function(Id, title)
 {
     if (Id == null) return;
     var o = $(Id);
     if (!o) return;
     o.childNodes[0].childNodes[1].childNodes[0].innerHTML = title;
 }
 this.Body = function(Id, wbody)
 {
     if (Id == null) return;
     var o = $(Id);
        if (!o) return;
        if (wbody.slice(0, 4) == "[pg]")
            o.childNodes[1].childNodes[1].innerHTML = "<iframe onfocus="MyWin.Show('"+ Id +"',this)" src='"+ wbody.slice(4) +"' frameBorder='0' marginHeight='0' marginWidth='0' scrolling='no' width='100%' height='100%'></iframe>";
        else
            o.childNodes[1].childNodes[1].innerHTML = wbody;
 }
 this.Show = function(Id)
    {
     if (Id == null) return;
     var o = $(Id);
        if (!o) return;
     o.style.zIndex = ++zIndex;
    }
    this.Move_e = function(Id, l , t, ll, tt)
    {
     if (typeof(window["ct"+ Id]) != "undefined") clearTimeout(window["ct"+ Id]);
     var o = $(Id);
     if (!o) return;
      o.style.left = l +"px";
      o.style.top = t +"px";
     window["ct"+ Id] = window.setTimeout("MyWin.Move_e('"+ Id +"', "+ l +" , "+ t +", "+ ll +", "+ tt +")", 1);
    }
    this.Close = function(Id, Opacity)
    {
     if (typeof(window["et"+ Id]) != "undefined") clearTimeout(window["et"+ Id]);
     var o = $(Id);
     if (!o) return;
     if (Opacity == 10) o.childNodes[0].childNodes[1].innerHTML = "";
     if (Ie)
     {
      o.style.filter = "alpha(opacity="+ Opacity +",style=0)";
     }
     else
     {
      o.style.opacity = Opacity / 10;
     }
     if (Opacity > 20)
      Opacity -= 10;
     else
      Opacity--;
     if (Opacity <= 0)
     {
         if (o.getElementsByTagName("IFRAME").length != 0)
         {
             o.getElementsByTagName("IFRAME").src = "about:blank";
         }
         o.innerHTML = "";
      document.body.removeChild(o);
      return;
     }
     window["et"+ Id] = window.setTimeout("MyWin.Close('"+ Id +"', "+ Opacity +")", 1);
    }
    this.ndiv = function(Id, Opacity)
    {
     var o = $(Id);
     if (!o) return;
     o.innerHTML = "";
  document.body.removeChild(o);
  return;
    }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<input type="button" value="这是一个默认窗口，窗口位置默认为当前可视区域的居中，把鼠标往下拉，下面有个按钮可以测试"  onclick="MyWin.Create('','标题','这里是内容，可以是变量哦');">
<br>
<input type="button" value="这个窗口设置了宽度500px、高度300px" onclick="MyWin.Create('','标题','这里是内容，可以是变量哦','500','300');">
<br>
<input type="button" value="这是一个固定了位置x=600px、y=400px的窗口" onclick="MyWin.Create('','标题','这里是内容，可以是变量哦','500','300','600','400');">
<br>
<input type="button" value="当窗口宽度或高度大于可视区域的宽度或高度，以固定位置的设置优先" onclick="MyWin.Create('','标题','这里是内容，可以是变量哦','700','900','600','400');">
<br>
<input type="button" value="这是没有设置固定位置时的情况" onclick="MyWin.Create('','标题','这里是内容，可以是变量哦','700','900');">
<br>
<input type="button" value="以上窗口都有遮罩，但这个没有" onclick="MyWin.Create('no','标题','这里是内容，可以是变量哦','500','300');">
<br>
<input type="button" value="细心的朋友可能已经发现了，没有遮罩的窗口可以打开无限个哦" onclick="MyWin.Create('no','标题','这里是内容，可以是变量哦','500','300','100','300');">
<br>
<input type="button" value="窗口里除了内容，也可以放iframe" onclick="MyWin.Create('no','我是站长特效网','[pg]http://www.zzjs.net','800','500');">
<br>
<input type="button" value="有遮罩的iframe，同上，盖住select没商量" onclick="MyWin.Create('','我是站长特效网','[pg]http://www.zzjs.net','800','500');">
<br>
<input type="button" value="考虑到大多用于单个窗口，且窗口位置可设置，所以没有写拖动函数，如有需要请自行添加" onclick="MyWin.Create('','^-^','我是不能拖动的');">
<br>
<input type="button" value="本代码测试通过IE6/7/8/9、FF3.6.2、chorme5.0.375.55、Safari4.0.5、Opera10.60" onclick="MyWin.Create('','^-^','本代码测试通过IE6/7/8/9、FF3.6.2、chorme5.0.375.55、Safari4.0.5、Opera10.60');">
<br>
<input type="button" value="本代码脱胎于网络收集的程序，我只是把它们磋成一砣，如有眼熟，请无视之…" onclick="MyWin.Create();">
<br>
<input type="button" value="本代码没有版权，欢迎转载，可用于任何个人或商业应用，但本人不负任何相关责任" onclick="MyWin.Create();">
<br>
<input type="button" value="本人所学有限，不足之处，请大侠们口诛笔伐，我受得了的…." onclick="MyWin.Create();">
<br>
<input type="button" value="BY sky 2010-9-29" onclick="MyWin.Create();">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<textarea rows="2" name="S1" cols="20">
</textarea>
</body>
</html>

关于简便的弹出窗口特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010092996613.shtml方便下次再访问哦。

·上一篇： 跟随屏幕滚动的漂浮窗口
·下一篇： 一个简单又漂亮的弹出层窗口效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

简便的弹出窗口特效

文章分类LIST >>返回首页

最新游戏

最新新闻