仿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; width: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; width:100%;height:100%; cursor:pointer; background-color:#06F;"> 75 76 </div> 77 </body> 78 </html>
