JavaScript képkockás ferde vonal for ciklussal 3408
Mozillában is működik
A DOCTYPE meghatározást töröljük, vagy tegyük megjegyzés jelek közé, és natur HTML fájlt alkalmazunk
<-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
Megjegyzés:
Az Explorer és Mozilla Firefox, így jeleníti meg egyformán, a vonalakat:
- Explorer böngésző, nézet menü - nagyítás, 100%-ra van beállítva.
- Mozila Firefox böngésző nézet menü - nagyítás, kicsinyítésre van beállítva
XHTML fájl
<div class="bemutato">
<script type="text/javascript" language="javascript" src="js_fájl_elérési_út.js"> </script>
</div>
CSS fájl
.bemutato{width: 350px; background-color: yellow; margin-left: 220px; padding: 10px;}
JavaScript fájl
var vh = 100; // vh=Vonal hossza, megegyezik a kockaképek számával, azaz, ennyiszer fut le a for ciklus
var x=30; // A ferde vonal kezdő pozíciója, vízszintesen margin-left:érték
var x2=75; // A függőleges vonal kezdő pozíciója, azaz megjelenési helyzete = margin-left:érték
var y=0.5; //A div szakaszok közötti távolság = margin-top:érték Legoptimálisabb érték:két vonal esetén = 0.5, csak a ferde vonal megjelenítésekor = 0;
for (i = 0; i < vh; i++) {
x=x+1; // Ferde vonalnál, ennyivel mozdulnak el egymáshoz képest left, azaz "X" koordinátán, a div szakaszok
//Vonal, ferde
document.write('<div id="vonal[i]" style="margin-top: '+y+'; margin-left: '+x+'; width:2px; height:2px; "> <img src="kep2x2.jpg" width: 2px; height: 2px; /> </div>');
//Vonal, függőleges
document.write('<div id="vonal[i]" style="margin-top: '+y+'; margin-left: '+x2+'; margin-top: -2.5px; "> <img src="kep2x2.jpg" width: 2px; height: 2px; /> </div>');
}