仿W8屏保

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 4 <title>防W8系统屏保</title>
 5 
 6 <script>
 7 (JS={
 8     $:function(o){return typeof o=="string"?document.getElementById(o):o},
 9     dingwei:false,
10     shubiao:0,
11     weizhi:0,
12     on:function(o,type,fn){o.attachEvent?o.attachEvent('on'+type,function(){fn.call(o)}):o.addEventListener(type,fn,false);return JS.on},
13     
14     fn1:function(o,attr){
15     e= arguments.callee.caller.arguments[0]||window.event;
16     var b=e.clientY
17     
18     
19     this.shubiao=b;    
20     this.dingwei=true;
21     this.weizhi=parseInt(o.style[attr])
22     
23     clearInterval(o["ll"])    
24     },
25     
26     fn2:function(o,attr){
27     if(this.dingwei){
28     var d= arguments.callee.caller.arguments[0]||window.event;
29     var dd=d.clientY-this.shubiao;
30     var cc=this.weizhi+dd;
31     if( dd<=0){
32     o.style[attr]=cc+"px" 
33     }
34     }
35     },
36      
37     fn3:function(o,attr){
38      this.dingwei=false;
39      var gg=parseInt(o.style[attr]);
40      clearInterval(o["ll"]);
41      if(gg<-300)
42      {
43      o["ll"]=setInterval(function(){ gg-=5; o.style[attr]=gg+"px"; if(gg<-(screen.height)){
44      clearInterval(o["ll"])    
45      }
46      },10) 
47      }
48      else if(gg>=-300&&gg<-5){
49      o["ll"]=setInterval(function(){ gg+=5; o.style[attr]=gg+"px"; if(gg>=-5){
50      clearInterval(o["ll"])    
51      }
52      },10) 
53      }
54      },
55     
56 }).on(window,"load",function(){
57       var Q=JS.$("bb");
58       JS.on(Q,"mousedown", function(){ JS.fn1(Q,"top")})
59       (Q,"mousemove",function(){ JS.fn2(Q,"top")})
60       (Q,"mouseup",function(){JS.fn3(Q,"top")})
61       (Q,"mouseout",function(){JS.fn3(Q,"top")})
62 })
63 
64 
65 
66 
67 </script>
68 </head>
69 <body>
70 <div id="bb" style=" position:absolute; top:0px; left:0px; 100%;height:100%; cursor:pointer; background-color:#06F;">
71 </div>
72 </body></html>

面向对象：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 </head>
 7 
 8 
 9 <script type="text/javascript">
10 function WP8(id){
11 var $this=this;
12 this.kongzhi=false;
13 this.cY1=null;
14 this.cY2=null;    
15 this.weizhi=null;
16 this.oid=document.getElementById(id);
17 this.oid.onmousedown=function(e){var e=e||window.event; $this.cY1=e.clientY;$this.fn1()};
18 this.oid.onmousemove=function(e){var e=e||window.event; $this.cY2=e.clientY;$this.fn2()};
19 this.oid.onmouseup=function(){$this.fn3()};
20 this.oid.onmouseout=function(){$this.fn3()};
21 };
22 
23 WP8.prototype.fn1=function(){
24 this.kongzhi=true;
25 this.weizhi=parseInt(this.oid.style["top"]);
26 };
27 
28 WP8.prototype.fn2=function(){
29 if(this.kongzhi&&(this.cY2-this.cY1)<0){
30 this.oid.style["top"]=this.weizhi+(this.cY2-this.cY1)+"px";    
31 }    
32 
33 };
34 
35 WP8.prototype.fn3=function(){
36 this.kongzhi=false;
37 var this1=this
38 var gg=parseInt(this.oid.style["top"]);
39 clearInterval(this['qingchu']);
40 if(gg<-300){
41     
42 this['qingchu']=setInterval(function(){
43 gg-=5;
44 this1.oid.style["top"]=gg+"px";    
45 
46 if(gg<-(screen.height)){clearInterval(this1['qingchu']);}
47 
48 },10)
49 
50 
51 }
52 
53  else if(gg>=-300&&gg<-5){
54 this['qingch']=setInterval(function(){
55     
56 gg+=5;    
57 this1.oid.style["top"]=gg+"px";        
58 
59 if(gg>=0){clearInterval(this1['qingch']);}
60 },10 )
61     
62 }
63 
64 };
65 
66 
67 window.onload=function(){
68     
69 new WP8("bb")
70 }
71 </script>
72 <body>
73 
74 <div id="bb" style=" position:absolute; top:0px; left:0px; 100%;height:100%; cursor:pointer; background-color:#06F;">
75 
76 </div>
77 </body>
78 </html>