Ausführliche Erklärung, wie JavaScript drei Methoden zum Ändern der Bildgröße verwendet

Wie wir alle wissen, sind farbenfrohe Web-Kursmaterialien untrennbar mit der Unterstützung von Bildern verbunden. Während Bilder die Lebendigkeit von Webseiten erhöhen, erhöhen sie auch die Größe von Webseiten und verlangsamen die Download-Geschwindigkeit. Wie man ein Bild auf der Seite einer Website in einer angemessenen Größe anzeigt, ist ein Thema, das es wert ist, untersucht zu werden. Zu diesem Zweck hat der Autor einige seiner eigenen Erfahrungen als Referenz für Drehbuchautoren aufgeschrieben, um sich gegenseitig zu ermutigen.

Anforderungsanalyse: Diese Website verwendet ein Nachrichtenverwaltungssystem. In der Nachrichtenspalte der Startseite müssen Bilddateien als Bilder in den Bildnachrichten aufgerufen werden, sodass ein Textumbruchformular entsteht. Je nach Layout-Anforderungen darf die Breite des Bildes 200 Pixel nicht überschreiten.

Das Problem, Bilder in angemessener Größe anzeigen zu können, ist im Wesentlichen ein Problem der Verkleinerung großer Bilder. Wie man die Größe (Breite, Höhe) des Bildes über die URL des Bildes erhält, ist der Schlüssel zum Problem. Angenommen, k=Breite/Höhe stellt den Proportionalwert des Bildes dar, solange K>=1 die Breite darf 200 Pixel nicht überschreiten, die Höhe muss ba4a3f20dd3b9dbacc59036b4b12e3c8=1 die Breite begrenzt, begrenzt K3a1a71964587cc22f9cb3f3657b624c6, um die Breite und Höhe des Bildes zu definieren.

Das 873c4d80998f5627c84fe017b9b46671-Element kann den Anzeigebereich definieren. die Höhe und Breite des Bildes (Width). Wenn das Verarbeitungsereignis ausgelöst wird, kann der Effekt durch dynamisches Ändern der beiden Eigenschaften des Diagramms erzielt werden.

<script>
functionshow()   
{var w,h;   
var k;   
var con;  
w=smallslot.width;  
 h=smallslot.height;   
 k=w/h;  
 if(k>=1){         
 if (w>=200){           
 w=200;          
 h=w/k;         
 }}         
 else                
 {if(h>=150){           
 h=150;          
  w=k?h;          
  }           
  }       
  return w;
  }
  </script>
  <imgborder=0 ID="smallslot" src="4.jpg" onload="javascript:width=x;"align="left">
  <script languge="javascript">      
   varx=show();   
   </script>

In diesem Code wird die Breite des verarbeiteten Bildes als Rückgabewert der Funktion show() verwendet. Verwenden Sie das Onload-Ereignis, um die Breite des Bildes in 873c4d80998f5627c84fe017b9b46671 aufzurufen.

Problem: Die Bilder in den Bildnachrichten auf der Homepage werden nicht angezeigt. Klicken Sie auf die Schaltfläche „Los“ in der Adressleiste, um sie normal anzuzeigen. Die Praxis zeigt mir einen weiteren Misserfolg! Denn das Einzige, was Internetnutzer gewohnt sind, ist die Eingabe der URL und die Eingabe der Eingabetaste. Auf dieser Grundlage hat der Autor folgende Versuche unternommen: (1) Fügen Sie „1d455c0487951f640ab51b2b9deb260e zwischen 93f0f5c25f18dab9d176bd4f6de5d30e und 9c3bca370b5104690d9ef395f2c5f8d1 hinzu. . Der Bildschirm wird automatisch alle 10 Sekunden aktualisiert. Dadurch kann das Bild normal angezeigt werden, die ständige Aktualisierung des Bildschirms macht es jedoch sehr unangenehm. (2) window.location.reload() lädt die Seite neu, aber das Ergebnis ist, dass die Seite ständig geladen wird, sodass die Webseite nicht korrekt angezeigt werden kann. (3)90e1350e84a8f29eab9528462a6ae8d9200) this.width=200;"align="left">, der Test kann bestanden werden, aber wenn das Bild Breite < Höhe und Breite> 200 Pixel. Der Seitenanzeigeeffekt besteht darin, dass die Höhe 150 überschreitet. Wenn also keine Einschränkung von K = Breite oder K = Höhe besteht, ist der Seiteneffekt unangemessen und kann daher nicht verwendet werden.

Option 3: Fügen Sie das Onload()-Ereignis in 873c4d80998f5627c84fe017b9b46671 ein, um das Ereignis auszulösen, wenn die Seite geladen wird

Nach sorgfältiger Analyse der Option 2 wird das Der Autor stellte fest, dass der Hauptgrund darin liegt, dass das Onload-Ereignis ein Ereignis ist, das beim Laden der Seite ausgelöst wird. Onload wird im 9617a69a9711c47d4c7e5f42d8a4909e-Element verwendet. Wenn der IE es hier interpretiert, muss die Seite geladen werden, um „javascript:width=x;“ auszulösen, sodass die Seite neu geladen werden muss, um das Bild anzuzeigen. Darüber hinaus wird Onload() im Allgemeinen im 9c5594a5fc8d2e506f1a8147102c836b-Element verwendet, um das beim Laden der Seite ausgelöste Ereignis vorab abzuschließen. Also habe ich das Onload()-Ereignis in 873c4d80998f5627c84fe017b9b46671 in 9c5594a5fc8d2e506f1a8147102c836b eingefügt, der Code lautet wie folgt:

<body onload="window.smallslot.width=show();">
<script>       
function show()           
{…..
//show()       
}
</script>
<img border=0 ID="smallslot"src="1.jpg" align="left">
this is atest!　

　再次测试，通过了，而且首页调用成功！我成功了！　　经过这次经历，让笔者感受到了从事程序开发工作的艰辛和乐趣！有时为了一个小小的问题折腾得茶饭不思，但成功的喜悦又让人溢于言表。任何事情只要自己能刻苦钻研、持之以恒，相信问题总会得到解决的。

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie JavaScript drei Methoden zum Ändern der Bildgröße verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!