rest screen (dark creen)

**aloha** · 03-20-2012, 05:23 PM

Hi, I would like to make a rest screen as http://www.alibaba.vn/index.vip. It means after seconds we do not touch mouse the screen will be rested (dark) and when we touch mouse the display will come back for working.
Please help me, thanks a lots!

**aloha** · 03-22-2012, 03:42 PM

No body knows.

**aloha** · 03-29-2012, 04:08 PM

Like http://www.alibaba.vn/index.vip

**vwphillips** · 03-30-2012, 12:04 PM

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.screen {
  background-Color:red;
/* Moz */
  opacity: .5;
/* IE5-7 */
  filter: alpha(opacity=50);
/* IE8 */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

/*]]>*/
</style></head>

<body>

<div style="height:2000px;" ></div>
<script type="text/javascript">
/*<![CDATA[*/
// WindowMask (30-March-2012)
// by: Vic Phillips http://www.vicsjavascripts.org.uk/


var zxcWindowMask={

 init:function(o){
  var oop=this,s=document.createElement('DIV'),m1=s.cloneNode(true),m2,sec=o.RevealSeconds,ms=o.AnimateMilliSec;
  s.style.position='absolute';
  s.className=o.ClassName;
  s.style.width='0px';
  s.style.height='0px';
  m1.style.position='fixed';
  m1.style.zIndex='999';
  m1.style.width='0px';
  m1.style.height='0px';
  m2=m1.cloneNode(true);
  m1.style.left='0px';
  m1.style.top='0px';
  m2.style.right='0px';
  m2.style.bottom='0px';
  document.body.appendChild(m1);
  document.body.appendChild(m2);
  m1.appendChild(s);
  oop.m1=m1;
  oop.m2=m2;
  oop.s=s;
  oop.sec=typeof(sec)=='number'?sec*1000:5000;
  oop.ms=typeof(ms)=='number'?ms:1000;
  oop.ud=false;
  oop.addevt(document,'mousemove','move');
  oop.addevt(window,'resize','move');
  oop.addevt(window,'scroll','move');
  oop.move();
 },

 move:function(){
  var oop=this;
  clearTimeout(oop.to);
  if (oop.s.offsetWidth<100){
   oop.to=setTimeout(function(){oop.ud=true; oop.reveal(true); },oop.sec);
  }
  else if (oop.ud){
   oop.ud=false;
   oop.reveal(false)
  }
 },

 reveal:function(ud){
  var oop=this,s=oop.s,m1=oop.m1,m2=oop.m2,ms=oop.ms,srt=new Date(),lft=m2.offsetLeft/2,top=m2.offsetTop/2;
  oop.animate('left',ud?lft:s.offsetLeft,ud?m1.offsetLeft:lft,srt,ms,ud)
  oop.animate('width',ud?0:s.offsetWidth,ud?m2.offsetLeft-m1.offsetLeft:0,srt,ms,ud)
  oop.animate('top',ud?top:s.offsetTop,ud?m1.offsetTop:top,srt,ms,ud)
  oop.animate('height',ud?0:s.offsetHeight,ud?m2.offsetTop-m1.offsetTop:0,srt,ms,ud)
 },

 animate:function(mde,f,t,srt,mS,ud){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   oop.s.style[mde]=Math.max(now,f<0||t<0?now:0)+'px';
  }
  if (ms<mS&&ud==oop.ud){
   oop.dly=setTimeout(function(){ oop.animate(mde,f,t,srt,mS,ud); },10);
  }
  else {
   oop.s.style[mde]=t+'px';
  }
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 }



}


zxcWindowMask.init({ClassName:'screen',RevealSeconds:5,AnimateMilliSec:500})
/*]]>*/
</script>
</body>
</html>

Thread: rest screen (dark creen)

Thread Tools

Search Thread

rest screen (dark creen)

Bookmarks

Bookmarks

Posting Permissions