Pure JS code to make the Web clock special effects "attached example" _javascript tips

Source: Internet
Author: User

Pure JS code to make the Web clock special effects, need the code farmers can take a look. For everyone to make a reference.

<HTML><HEAD> <meta http-equiv=content-type content= "text/html; charset=gb2312 "> <meta content=" MSHTML 6.00.6000.16414 "name=generator></head> <BODY> <DIV St Yle= "LEFT:155PX; width:400px; Zoom:1; Position:absolute; top:133px; height:300px "> <div id=bg style=" left: -22px; width:150px; zoom:1.5; Position:absolute; Top: -57px; height:150px "><img style=" Z-INDEX:22; width:129px; Height:129px "src=" Yun_qi_img/novelty.gif "> </DIV> <div id=h style=" padding-right:5px; padding-left:5px; padding-bottom:5px; width:129px; padding-top:5px; Position:absolute; Height:129px "><img style=" Z-INDEX:22; width:129px; Height:129px "src=" Yun_qi_img/novelty_h.gif "> </DIV> <div id=m style=" padding-right:5px; padding-left:5px; padding-bottom:5px; width:129px; padding-top:5px; Position:absolute; Height:129px "><img style=" Z-INDEX:22; width:129px; Height:129px "src=" Yun_qi_img/noveltY_m.gif "> </DIV> <div id=s style=" padding-right:5px; padding-left:5px; padding-bottom:5px; width:129px; padding-top:5px; Position:absolute; Height:129px "><img style=" Z-INDEX:22; width:129px; Height:129px "src=" Yun_qi_img/novelty_s.gif "> </DIV> <div id=dot style=" padding-right:5px; padding-left:5px; padding-bottom:5px; width:129px; padding-top:5px; Position:absolute; Height:129px "><img style=" Z-INDEX:22; width:129px;  Height:129px "src=" Yun_qi_img/novelty_dot.gif "> </DIV> <DIV> <SCRIPT>//oobj input requires that 
A matrix filter is applied. 
Deg input defines the requested angle of rotation. 
var Deg2radians = Math.PI * 2/360; 
 function Matrixfilter (obj) {if (!obj.filters) return; 
 Alert (Obj.filters.item (0)); 
 var Matrix; For (p in obj.filters) {if (p== "DXImageTransform.Microsoft.Matrix") matrix=obj.filters[" 
 DXImageTransform.Microsoft.Matrix "]; } if (! Matrix) {obj.style.filter+= "Progid:DXImageTransform.Microsoft.Matrix ()"; 
 } matrix=obj.filters["DXImageTransform.Microsoft.Matrix"]; 
  This.equal=function (matrix2d_x) {if (MATRIX2D_X.M11) Matrix.m11 = MATRIX2D_X.M11; 
  if (matrix2d_x.m12) matrix.m12 = MATRIX2D_X.M12; 
  if (matrix2d_x.m21) matrix.m21 = MATRIX2D_X.M21; 
 if (MATRIX2D_X.M22) matrix.m22 = MATRIX2D_X.M22; 
  
 } if (arguments[1)) this.equal (arguments[1]); This. 
  Rotate=function (deg) {rad = deg * Deg2radians; 
  Costheta = Math.Cos (RAD); 
  Sintheta = Math.sin (RAD); 
  var d=new matrix2d (Costheta,-sintheta,sintheta,costheta); 
 This.equal (Matrix2d.mul (matrix,d)); } this. 
  Rotateto=function (deg) {rad = deg * Deg2radians; 
  Costheta = Math.Cos (RAD); 
  Sintheta = Math.sin (RAD); 
  var d=new matrix2d (Costheta,-sintheta,sintheta,costheta); 
 This.equal (d); } this. 
  Rotateat=function (deg,sx,sy) {rad = deg * Deg2radians; 
  Costheta = Math.Cos (RAD); 
  Sintheta = Math.sin (RAD); var d=new matrix2d (Costheta,-sintheta,sinTheta,costheta); 
  var x=sx-matrix.dx; 
  var Y=sy-matrix.dy; This. 
  MoveTo (X*COSTHETA+Y*SINTHETA-X,-X*SINTHETA+Y*COSTHETA-Y);  
 This.equal (Matrix2d.mul (matrix,d)); } this. 
  Rotatetoat=function (deg,sx,sy) {rad = deg * Deg2radians; 
  Costheta = Math.Cos (RAD); 
  Sintheta = Math.sin (RAD); 
  var d=new matrix2d (Costheta,-sintheta,sintheta,costheta); 
  var x=sx; 
  var Y=sy; This. 
  MoveTo (x (X*costheta-y*sintheta),-(x*sintheta+y*costheta-x)); 
 This.equal (d); } this. 
  Moveto=function (Sx,sy) {matrix.dx=sx; 
 Matrix.dy=sy; 
 } this.tomatrix2d=function () {return new matrix2d (MATRIX.M11,MATRIX.M12,MATRIX.M21,MATRIX.M22); } this. 
  Zoomby=function (Sx,sy) {var d=new matrix2d (Sx,0,0,sy); 
 This.equal (Matrix2d.mul (matrix,d)); } this.tostring=function () {return "+matrix.m11+" "+matrix.m12+" \ n "+matrix.m21+" +matrix.m22+ "\ n"}//matrix . 
 Sizingmethod= ' clip to original '; 
 This.fnsetrotation (30); 
 alert (MATRIX.M11); Alert (obj.filters["DX")ImageTransform.Microsoft.Matrix "]); function matrix2d () {this. M11 = arguments[0]| | 
 1; This. M12 = arguments[1]| | 
 0; This. M21 = arguments[2]| | 
 0; This. M22 = arguments[3]| | 
 1; This. 
  Mul_matrix2d=function (matrix2d_b) {var r=new matrix2d ();   
  R=matrix2d.mul (this,matrix2d_b);  
 return R; } this.tostring=function () {return "" +this. m11+ "" +this. m12+ "\ n" +this. m21+ "" +this. 
 M22+ "\ n"}} matrix2d.mul=function (Matrix2d_a,matrix2d_b) {var r=new matrix2d (); 
 R.M11=MATRIX2D_A.M11*MATRIX2D_B.M11+MATRIX2D_A.M12*MATRIX2D_B.M21; 
 R.M12=MATRIX2D_A.M11*MATRIX2D_B.M12+MATRIX2D_A.M12*MATRIX2D_B.M22; 
 R.M21=MATRIX2D_A.M21*MATRIX2D_B.M11+MATRIX2D_A.M22*MATRIX2D_B.M21; 
 R.M22=MATRIX2D_A.M21*MATRIX2D_B.M12+MATRIX2D_A.M22*MATRIX2D_B.M22;  
return R; 
} var ms=new matrixfilter (s); 
var mm=new matrixfilter (M); 
var mh=new matrixfilter (h); 
var I=1; SetInterval ("Ms.") 
Rotatetoat (New Date ()). Getseconds () *6+6,69,69) ", 500); SetInterval ("MM"). Rotatetoat (New Date ()). GetminuteS () *6+6,69,69) ", 500); SetInterval ("MH.") 
Rotatetoat ((new Date ()). GetHours () + (new Date ()). getminutes ()/60) *30,69,69) ", 500); Mf. 
MoveTo (30,70); Mf. 
Zoomby (1.5,1.5); Mf. 
Zoomby (1.5,1.5); 

Alert (mf.tomatrix2d ()); 
Alert (Matrix2d.mul (M2D1,M2D2)); 
Fnsetrotation (ODiv.filters.item (0), 30); 

 </SCRIPT> </DIV></DIV></BODY></HTML>

Above this pure JS code to make the Web clock special effects "attached example" is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: