点击弹出窗口,在窗口中播放视频文…

来源:互联网 发布:淘宝新店别人怎样看到 编辑:程序博客网 时间:2024/05/17 22:37

<!--视频弹出样式开始-->
<LINK rel=stylesheet type=text/csshref="js/lightwindow.css">
<SCRIPT language=JavaScript type=text/javascriptsrc="js/4.js"></SCRIPT>
<!--视频弹出样式结束-->

<table width="1050" border="0" align="center"cellpadding="0" cellspacing="0">
  <tr>
   <td background="images/maincontentbgc1050.png"style="padding-left:26px;padding-right:26px"><inputname="image" type="image"onmousedown="MyWin.Create('no','尚德机构名师班','[pg]http://static.youku.com/v/swf/qplayer.swf?VideoIDS=XMjQ0MTcwODA4=&amp;isAutoPlay=true&amp;isShowRelatedVideo=false&amp;embedid=-&amp;showAd=0','800','500');"src="images/0406-6.jpg" width="998" height="341"/></td>
  </tr>
</table>

 

 

 

4.js

 

<!---shipin--->
var MyWin = new Win();
var imgfile = "http://bj.sunland.org.cn/templet/default/sf6/images/";//设置图片路径,相对或绝对都行
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];
}
var zIndex = 0;
var Winid  = 0;
var Ie = /msie/i.test(navigator.userAgent);
function $(Id){return(document.getElementByIdx_x(Id))}
function Win()
{
 this.Create = function(mask,title, wbody, w, h,l, t)
 {
  Winid++;
  mask = mask;
  title = title || "尚德机构_老师";
  wbody = wbody || "<palign='center'>正在载入…</p>";
  w = w || 850;
  h = h || 300;
  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_x("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_x("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_x("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_x("DIV");
  var myboy = document.createElement_x("DIV");
  var mybom = document.createElement_x("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_x("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 ="<divstyle=\"position:absolute;overflow:hidden;height:15px;top:12px;padding-left:4px;padding-right:4px;\"></div><divstyle=\"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 = "<iframeonfocus=\"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_r("IFRAME").length != 0)
        {
            o.getElementsByTagName_r("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;
    }
}
<!--shipingend--->

 

 

 

lightwindow.css

 

#lightwindow_overlay {
 Z-INDEX: 500; POSITION: absolute; WIDTH: 100%;DISPLAY: none; HEIGHT: 100px; VISIBILITY: hidden; TOP: 0px; LEFT:0px
}
#lightwindow {
 Z-INDEX: 999; POSITION: absolute; LINE-HEIGHT:0px; DISPLAY: none; VISIBILITY: hidden
}
#lightwindow_container {
 POSITION: absolute; PADDING-BOTTOM: 0px; MARGIN:0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: none;VISIBILITY: hidden; PADDING-TOP: 0px
}
* HTML #lightwindow_container {
 OVERFLOW: hidden
}
#lightwindow_contents {
 Z-INDEX: 0; BORDER-BOTTOM: #ffffff 10px solid;POSITION: relative; BORDER-LEFT: #ffffff 10px solid;BACKGROUND-COLOR: #ffffff; OVERFLOW: hidden; BORDER-TOP: #ffffff10px solid; BORDER-RIGHT: #ffffff 10px solid
}
#lightwindow_loading {
 Z-INDEX: 9999; POSITION: absolute;PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #f0f0f0; PADDING-LEFT:10px; WIDTH: 100%; PADDING-RIGHT: 10px; HEIGHT: 100%; PADDING-TOP:10px; TOP: 0px; LEFT: 0px
}
#lightwindow_loading_shim {
 POSITION: absolute; WIDTH: 100%; DISPLAY: none;HEIGHT: 100%; TOP: 0px; LEFT: 0px
}
#lightwindow_loading SPAN {
 PADDING-BOTTOM: 0px; LINE-HEIGHT: 32px;PADDING-LEFT: 0px; PADDING-RIGHT: 10px; FLOAT: left; COLOR:#444444; FONT-SIZE: 12px; PADDING-TOP: 0px
}
#lightwindow_loading SPAN A {
 COLOR: #09f; CURSOR: pointer; TEXT-DECORATION:none
}
#lightwindow_loading SPAN A:link {
 COLOR: #09f; CURSOR: pointer; TEXT-DECORATION:none
}
#lightwindow_loading SPAN A:visited {
 COLOR: #09f; CURSOR: pointer; TEXT-DECORATION:none
}
#lightwindow_loading SPAN A:hover {
 TEXT-DECORATION: underline
}
#lightwindow_loading SPAN A:active {
 TEXT-DECORATION: underline
}
#lightwindow_loading IMG {
 MARGIN: 0px 10px 0px 0px; FLOAT: left
}
#lightwindow_navigation {
 POSITION: absolute; DISPLAY: none; TOP: 0px;LEFT: 0px
}
#lightwindow_navigation_shim {
 POSITION: absolute; WIDTH: 100%; DISPLAY: none;HEIGHT: 100%; TOP: 0px; LEFT: 0px
}
#lightwindow_navigation A {
 OUTLINE-STYLE: none
}
#lightwindow_navigation A:link {
 OUTLINE-STYLE: none
}
#lightwindow_navigation A:visited {
 OUTLINE-STYLE: none
}
#lightwindow_navigation A:hover {
 OUTLINE-STYLE: none
}
#lightwindow_navigation A:active {
 OUTLINE-STYLE: none
}
#lightwindow_previous {
 WIDTH: 49%; DISPLAY: block; BACKGROUND:url(../images/blank.gif) no-repeat; HEIGHT: 100%
}
#lightwindow_next {
 WIDTH: 49%; DISPLAY: block; BACKGROUND:url(../images/blank.gif) no-repeat; HEIGHT: 100%
}
#lightwindow_previous {
 FLOAT: left; LEFT: 0px
}
#lightwindow_next {
 FLOAT: right; RIGHT: 0px
}
#lightwindow_previous:hover {
 BACKGROUND: url(../images/prevlabel.gif)no-repeat left 15%
}
#lightwindow_previous:active {
 BACKGROUND: url(../images/prevlabel.gif)no-repeat left 15%
}
#lightwindow_next:hover {
 BACKGROUND: url(../images/nextlabel.gif)no-repeat right 15%
}
#lightwindow_next:active {
 BACKGROUND: url(../images/nextlabel.gif)no-repeat right 15%
}
#lightwindow_previous_title {
 DISPLAY: none
}
#lightwindow_next_title {
 DISPLAY: none
}
#lightwindow_galleries {
 Z-INDEX: 50; POSITION: absolute; MARGIN: 0px 0px0px 10px; WIDTH: 100%; BOTTOM: 0px; DISPLAY: none; OVERFLOW:hidden; LEFT: 0px
}
#lightwindow_galleries_tab_container {
 WIDTH: 100%; HEIGHT: 0px; OVERFLOW: hidden
}
A#lightwindow_galleries_tab {
 LINE-HEIGHT: 22px; WIDTH: 77px; DISPLAY: block;BACKGROUND: url(../images/black-70.png) 0px 0px; FLOAT: right;HEIGHT: 20px; COLOR: #ffffbe; FONT-SIZE: 11px; CURSOR: pointer;FONT-WEIGHT: bold; TEXT-DECORATION: none
}
A#lightwindow_galleries_tab:link {
 LINE-HEIGHT: 22px; WIDTH: 77px; DISPLAY: block;BACKGROUND: url(../images/black-70.png) 0px 0px; FLOAT: right;HEIGHT: 20px; COLOR: #ffffbe; FONT-SIZE: 11px; CURSOR: pointer;FONT-WEIGHT: bold; TEXT-DECORATION: none
}
A#lightwindow_galleries_tab:visited {
 LINE-HEIGHT: 22px; WIDTH: 77px; DISPLAY: block;BACKGROUND: url(../images/black-70.png) 0px 0px; FLOAT: right;HEIGHT: 20px; COLOR: #ffffbe; FONT-SIZE: 11px; CURSOR: pointer;FONT-WEIGHT: bold; TEXT-DECORATION: none
}
* HTML A#lightwindow_galleries_tab {
 FILTER: alpha(opacity=70); BACKGROUND: #000000;opacity: .70
}
* HTML A#lightwindow_galleries_tab:link {
 FILTER: alpha(opacity=70); BACKGROUND: #000000;opacity: .70
}
* HTML A#lightwindow_galleries_tab:visited {
 FILTER: alpha(opacity=70); BACKGROUND: #000000;opacity: .70
}
A#lightwindow_galleries_tab:hover {
 COLOR: #ffffbe
}
A#lightwindow_galleries_tab:active {
 COLOR: #ffffbe
}
#lightwindow_galleries_tab_span {
 PADDING-BOTTOM: 0px; PADDING-LEFT: 7px; WIDTH:63px; PADDING-RIGHT: 7px; DISPLAY: block; HEIGHT: 20px;PADDING-TOP: 0px
}
#lightwindow_galleries_tab .up {
 BACKGROUND: url(../images/arrow-up.gif) no-repeat60px 5px
}
#lightwindow_galleries_tab .down {
 BACKGROUND: url(../images/arrow-down.gif)no-repeat 60px 6px
}
#lightwindow_galleries_list {
 BACKGROUND: url(../images/black-70.png) 0px 0px;HEIGHT: 0px; OVERFLOW: hidden
}
* HTML #lightwindow_galleries_list {
 FILTER: alpha(opacity=70); BACKGROUND: #000000;opacity: .70
}
.lightwindow_galleries_list {
 PADDING-BOTTOM: 10px; MARGIN: 0px 0px 10px;PADDING-LEFT: 10px; WIDTH: 200px; PADDING-RIGHT: 10px; FLOAT: left;PADDING-TOP: 10px
}
.lightwindow_galleries_list H1 {
 PADDING-BOTTOM: 5px; PADDING-LEFT: 0px;PADDING-RIGHT: 0px; COLOR: #09f; FONT-SIZE: 16px; CURSOR: pointer;FONT-WEIGHT: bold; TEXT-DECORATION: none; PADDING-TOP: 10px
}
.lightwindow_galleries_list LI {
 LIST-STYLE-TYPE: none; MARGIN: 5px 0px
}
.lightwindow_galleries_list A {
 PADDING-BOTTOM: 0px; LINE-HEIGHT: 22px;PADDING-LEFT: 10px; PADDING-RIGHT: 0px; DISPLAY: block; COLOR:#ffffff; FONT-SIZE: 11px; CURSOR: pointer; FONT-WEIGHT: bold;TEXT-DECORATION: none; PADDING-TOP: 0px
}
.lightwindow_galleries_list A:link {
 PADDING-BOTTOM: 0px; LINE-HEIGHT: 22px;PADDING-LEFT: 10px; PADDING-RIGHT: 0px; DISPLAY: block; COLOR:#ffffff; FONT-SIZE: 11px; CURSOR: pointer; FONT-WEIGHT: bold;TEXT-DECORATION: none; PADDING-TOP: 0px
}
.lightwindow_galleries_list A:visited {
 PADDING-BOTTOM: 0px; LINE-HEIGHT: 22px;PADDING-LEFT: 10px; PADDING-RIGHT: 0px; DISPLAY: block; COLOR:#ffffff; FONT-SIZE: 11px; CURSOR: pointer; FONT-WEIGHT: bold;TEXT-DECORATION: none; PADDING-TOP: 0px
}
.lightwindow_galleries_list A:hover {
 BORDER-LEFT: #ffffbe 3px solid; PADDING-BOTTOM:0px; PADDING-LEFT: 7px; PADDING-RIGHT: 0px; BACKGROUND: #000000;COLOR: #ffffbe; PADDING-TOP: 0px
}
.lightwindow_galleries_list A:active {
 BORDER-LEFT: #ffffbe 3px solid; PADDING-BOTTOM:0px; PADDING-LEFT: 7px; PADDING-RIGHT: 0px; BACKGROUND: #000000;COLOR: #ffffbe; PADDING-TOP: 0px
}
#lightwindow_data {
 POSITION: absolute
}
#lightwindow_data_slide {
 POSITION: relative
}
#lightwindow_data_slide_inner {
 PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #ffffff;PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 0px
}
#lightwindow_data_caption {
 PADDING-BOTTOM: 0px; LINE-HEIGHT: 25px;BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 0px; PADDING-RIGHT: 0px;COLOR: #666666; CLEAR: both; PADDING-TOP: 10px
}
#lightwindow_data_details {
 PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #f0f0f0;PADDING-LEFT: 10px; PADDING-RIGHT: 10px; HEIGHT: 20px; PADDING-TOP:0px
}
#lightwindow_data_author_container {
 TEXT-ALIGN: right; LINE-HEIGHT: 20px; FONT-STYLE:italic; WIDTH: 40%; FLOAT: right; COLOR: #666666; FONT-SIZE: 10px;OVERFLOW: hidden
}
#lightwindow_data_gallery_container {
 TEXT-ALIGN: left; LINE-HEIGHT: 20px; WIDTH: 40%;FLOAT: left; COLOR: #666666; FONT-SIZE: 10px; OVERFLOW:hidden
}
#lightwindow_title_bar {
 HEIGHT: 25px; OVERFLOW: hidden
}
#lightwindow_title_bar_title {
 TEXT-ALIGN: left; LINE-HEIGHT: 25px; FLOAT: left;COLOR: #ffffbe; FONT-SIZE: 14px
}
A#lightwindow_title_bar_close_link {
 TEXT-ALIGN: right; PADDING-BOTTOM: 0px;LINE-HEIGHT: 25px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT:0px; FLOAT: right; COLOR: #ffffbe; CURSOR: pointer; PADDING-TOP:0px
}
A#lightwindow_title_bar_close_link:link {
 TEXT-ALIGN: right; PADDING-BOTTOM: 0px;LINE-HEIGHT: 25px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT:0px; FLOAT: right; COLOR: #ffffbe; CURSOR: pointer; PADDING-TOP:0px
}
A#lightwindow_title_bar_close_link:visited {
 TEXT-ALIGN: right; PADDING-BOTTOM: 0px;LINE-HEIGHT: 25px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT:0px; FLOAT: right; COLOR: #ffffbe; CURSOR: pointer; PADDING-TOP:0px
}
A#lightwindow_title_bar_close_link:hover {
 COLOR: #ffffff
}
A#lightwindow_title_bar_close_link:active {
 COLOR: #ffffff
}
#lightwindow P {
 PADDING-RIGHT: 10px; COLOR: #000000
}

 

0 0
原创粉丝点击