Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > 用javascript实现画图效果的代码_javascript技巧

用javascript实现画图效果的代码_javascript技巧

WBOY

Freigeben： 2016-05-16 19:11:40

Original

1292 Leute haben es durchsucht

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Untitled Document</title> 
<style type="text/css"> 
 
</style>

<div id="apDiv1"></div> 
    <div id="apDiv2"></div> 
<div id="apDiv3"></div> 
<div id="apDiv4"></div> 
 
 
<script language="javascript" type="text/javascript"> 
function $(pId){ 
 return document.getElementById(pId); 
}

function JPos(){ 
  
}

JPos.getAbsPos = function(pTarget){ 
 var _x = 0; 
 var _y = 0; 
 while(pTarget.offsetParent){ 
   _x += pTarget.offsetLeft; 
   _y += pTarget.offsetTop; 
   pTarget = pTarget.offsetParent; 
 } 
 _x += pTarget.offsetLeft; 
 _y += pTarget.offsetTop; 
  
 return {x:_x,y:_y}; 
}

function JAniObj(){ 
 this.obj = null; 
 this.interval = null; 
  
 this.orgPos = null; 
 this.targetPos = null; 
  
 this.orgSize = {w:50,y:50};  //初始长宽 
 this.targetSize = {w:100,y:100}; //目标长宽 
 this.step  = {x:10,y:10};  //步长 x:x方向　y:y方向 
 this.alpha  = {s:10,e:90,t:10};  //透明度，s初始，e结束,t步长 
}

function JAni(){ 
 var self = this; 
 var aniObjs = {}; 
  
 var getCurrentStyleProperty = function(pObj,pProperty){ 
  try{  
   if(pObj.currentStyle) 
    return eval("pObj.currentStyle." + pProperty); 
   else 
    return document.defaultView.getComputedStyle(pObj,"").getPropertyValue(pProperty); 
  }catch(e){ 
   alert(e); 
  } 
 } 
  
 this.popup = function(pDiv,pOrgSize,pTargetSize,pStep,pAlpha){ 
   
  var aniObj = new JAniObj(); 
  aniObjs[pDiv] = aniObj; 
   
  with(aniObj){ 
   obj   = $(pDiv); 
   orgPos  = JPos.getAbsPos(obj); 
   orgSize  = pOrgSize; 
   targetSize = pTargetSize; 
   step  = pStep; 
   alpha  = pAlpha; 
    
   with(obj.style){ 
    overflow = "hidden"; 
    position = "absolute"; 
    width = pOrgSize.w + "px"; 
    height = pOrgSize.h + "px"; 
    left = orgPos.x + "px"; 
    top = orgPos.y + "px";  
    if(document.all){ 
     filter = "Alpha(opacity=" + pAlpha.s + ")"; 
    }else 
     opacity = pAlpha.s / 100; 
   }    
  } 
   
  aniObj.interval = setInterval("popup_('" + pDiv + "')",10); 
 } 
  
 popup_ = function(pDivId){ 
   
   
  pObj = aniObjs[pDivId]; 
   
  var w = parseInt(pObj.obj.style.width); 
  var h = parseInt(pObj.obj.style.height); 
      
  if(w >= Math.abs(pObj.targetSize.w) && h >= Math.abs(pObj.targetSize.h)){ 
   clearInterval(pObj.interval); 
   if(document.all) 
    pObj.obj.style.filter = "Alpha(opacity=" + pObj.alpha.e + ")"; 
   else 
    pObj.obj.style.opacity = pObj.alpha.e / 100; 
    
    
    
   delete aniObjs[pObj.obj.id]; 
  }else{ 
   if(w < Math.abs(pObj.targetSize.w)) 
    w += pObj.step.x; 
     
   if(h < Math.abs(pObj.targetSize.h)) 
    h += pObj.step.y; 
     
   if(document.all){ 
    var pattern = /opacity=(\d{1,3})/; 
    var result = pattern.exec(pObj.obj.style.filter); 
    if(result != null){ 
     if(result[1] < pObj.alpha.e) 
      pObj.obj.style.filter = "Alpha(opacity=" + (result[1] + pObj.alpha.t) + ")" 
     else 
      pObj.obj.style.filter = "Alpha(opacity=" + pObj.alpha.e + ")"; 
    } 
   }else{ 
    if(pObj.obj.style.opacity < pObj.alpha.e / 100){ 
     pObj.obj.style.opacity = parseFloat(pObj.obj.style.opacity) + pObj.alpha.t / 100; 
    }else 
     pObj.obj.style.opacity = pObj.alpha.e / 100; 
   } 
  } 
   
  pObj.obj.style.width = w + "px"; 
  pObj.obj.style.height = h + "px"; 
   
  if(pObj.targetSize.w < 0){ 
   var vLeft = parseInt(getCurrentStyleProperty(pObj.obj,"left")); 
   vLeft = isNaN(vLeft) ? 0 : vLeft; 
   pObj.obj.style.left = vLeft - pObj.step.x + "px"; 
  } 
   
  if(pObj.targetSize.h < 0){ 
   var vTop = parseInt(getCurrentStyleProperty(pObj.obj,"top")); 
   vTop = isNaN(vTop) ? 0 : vTop; 
   pObj.obj.style.top = vTop - pObj.step.y + "px"; 
  }   
 } 
}

var ani = new JAni(); 
 ani.popup( 
    "apDiv1", 
    {w:50,h:50}, //初始长宽 
    {w:200,h:200}, //目标长宽 
    {x:8,y:8},  //步长 
    {s:10,e:80,t:10}//透明度 起始，结束，步长 
    ); 
     
 ani.popup( 
    "apDiv2", 
    {w:50,h:50}, //初始长宽 
    {w:-200,h:200}, //目标长宽 
    {x:8,y:8},  //步长 
    {s:10,e:40,t:2}//透明度 起始，结束，步长 
    ); 
     
 ani.popup( 
    "apDiv3", 
    {w:50,h:50}, //初始长宽 
    {w:-200,h:-200},//目标长宽 
    {x:8,y:8},  //步长 
    {s:10,e:40,t:10}//透明度 起始，结束，步长 
    );

ani.popup( 
    "apDiv4", 
    {w:50,h:50}, //初始长宽 
    {w:200,h:-200},//目标长宽 
    {x:8,y:8},  //步长 
    {s:10,e:50,t:10}//透明度 起始，结束，步长 
    );   
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Verwandte Etiketten：

用javascript实现画图效果的代码

Quelle：php.cn

Vorheriger Artikel：如何快速的呈现我们的网页的技巧整理_javascript技巧 Nächster Artikel：IE autocomplete internet explorer's autocomplete_javascript技巧

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Was ist eine NullPointerException und wie behebe ich sie?

2024-10-22 09:46:29
Vom Anfänger zum Programmierer: Ihre Reise beginnt mit C-Grundlagen

2024-10-13 13:53:41
Webentwicklung mit PHP freischalten: Ein Leitfaden für Anfänger

2024-10-12 12:15:51
C entmystifizieren: Ein klarer und einfacher Weg für neue Programmierer

2024-10-11 22:47:31
Entfalten Sie Ihr Programmierpotenzial: C-Programmierung für absolute Anfänger

2024-10-11 19:36:51
Entfesseln Sie Ihren inneren Programmierer: C für absolute Anfänger

2024-10-11 15:50:41
Automatisieren Sie Ihr Leben mit C: Skripte und Tools für Anfänger

2024-10-11 15:07:41
PHP leicht gemacht: Ihre ersten Schritte in der Webentwicklung

2024-10-11 14:21:21
Erstellen Sie alles mit Python: Ein Leitfaden für Anfänger, um Ihrer Kreativität freien Lauf zu lassen

2024-10-11 12:59:11
Der Schlüssel zum Programmieren: Die Leistungsfähigkeit von Python für Anfänger freischalten

2024-10-11 12:17:31

Aktuelle Ausgaben

Die Statusaktualisierung funktioniert in React-Native auf Android nicht Ich habe einen Code, der Bildpaare in einer wischbaren horizontalen Galerie enthält. Wenn ...

Aus 2024-04-06 16:54:10

0

1

410

Warum unterbricht das Weglassen von 0 ms Schlaf meine CSS-Übergänge? Ich versuche, eine FLIP-Animation zu implementieren, um zu sehen, ob ich sie richtig verst...

Aus 2024-04-06 16:29:50

0

2

490

Cypress-Test zum Abfangen der Zoom-URL Ich habe einen Testfall, der letztendlich zu einem Zoom-Link weiterleitet. Ich versuche zu...

Aus 2024-04-04 16:16:37

0

1

340

Fügen Sie mithilfe von Javascript zusätzliche Werte zu den angezeigten Formatdatenfeldern hinzu Ich versuche Folgendes zu erreichen: Ich möchte ein Formular erstellen, das vom Benutzer e...

Aus 2024-04-04 15:17:13

0

1

3589

Erstellen Sie einen Hover-Effekt, der die Menüschaltfläche mit einer schattierten Klonversion in eine X-Form umwandelt Zunächst möchte ich zugeben, dass mein Titel verwirrend ist, und das tut mir leid. Was ich...

Aus 2024-04-04 11:55:21

0

2

315

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage