web-touristшахматен ефект
… преди година видях един ефект направен на флаш. Хареса ми и реших да си го направя на js. Днес докато се ровех да си преподреждам и почиствам машината видях този файл и му погледнах кода. Случвало ли ви се е да напишете нещо и година или повече след това да го погледнете? (… голям маитап е). Не че на мен или някой друг може да му потрябва, но след като някой го е използвал веднъж, защо да не потрябва и на друг … Veryhappy И така … кода се състои от четри функции (потребни). Първата, която използвам е за да позиционирам елементите (мързеше ме да използвам CSS и затова прибегнах до по-мързеливия начин – JS). Втората и третата съдържат самия ефект. Ако се вгледате внимателно, ще видите, че те могат да се съберът в една. Но в последствие ще се сблъскате с много неудобни неща, за които няма да се впускам в подробност сега, затова се придържах към основното правило при програмирането, а именно – разделяй и владей !!! И четвъртата функцийка е контролна. Тя проверява дали е приключил ефекта ако е бил активиран преди това (представяте ли си какво ще се получи ако я активирате два пъти последователно). Като допълнение ще добавя само, че съм използвал някои части от кода по-нетрадиционно. Например не използвах оператора „break“, а вместо това прекратявам цикъла по доста необичаен начин Winking …
Но за любителите на закачки – упражнението си го бива, освен това ще ви го представя в два вариянта (във втория съм ползвал изображение, което си направих на Файеруъркс).
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>like flash</title>
<style type="text/css">
body {
background: lightgreen;
}
.but1 {
background: lightblue;
width: 40px;
height: 40px;
}
.but3 {
background: peachpuff;
width: 40px;
height: 40px;
}
#but2 {
position: absolute;
top: 400px;
left: 50px;
width: 120px;
}
</style>
<script language="javascript">
var myLeft = 50;
var myTop = 50;
function Loader()
{
for(i = 1; i < 6; i++)
{
for(j = 0; j < 10; j++)
{
document.getElementById('but' + i + j).style.position = 'absolute';
document.getElementById('but' + i + j).style.left = myLeft + 'px';
document.getElementById('but' + i + j).style.top = myTop + 'px';
myLeft += 40;
document.getElementById('but' + i + j).style.visibility = 'hidden';
}
myLeft = 50;
myTop += 40;
}
}
function allRandomV()
{
var myVisb;
myVisb = Math.round(Math.random() * 49) + 10;
if(document.getElementById('but' + myVisb).style.visibility == 'visible')
{
var stat = 0;
for(i = 10; i < 60; i++)
{
if(document.getElementById('but' + i).style.visibility == 'visible')
{
stat++;
}
}
if(stat < 50)
{
stat = 0;
allRandomV();
}
else
{
stat = 0;
allRandomH();
}
}
else if(document.getElementById('but' + myVisb).style.visibility == 'hidden')
{
document.getElementById('but' + myVisb).style.visibility = 'visible';
setTimeout("allRandomV()",50);
}
}
function allRandomH()
{
var myVisb;
myVisb = Math.round(Math.random() * 49) + 10;
if(document.getElementById('but' + myVisb).style.visibility == 'hidden')
{
for(s = 1; s < 6; s++)
{
for(z = 0; z < 10; z++)
{
if(document.getElementById('but' + s + z).style.visibility == 'visible')
{
s = 7;
z = 11;
allRandomH();
}
}
}
}
else if(document.getElementById('but' + myVisb).style.visibility == 'visible')
{
document.getElementById('but' + myVisb).style.visibility = 'hidden';
setTimeout("allRandomH()",50);
}
}
function testForBugg()
{
var stat = 0;
for(i = 10; i < 60; i++)
{
if(document.getElementById('but' + i).style.visibility == 'hidden')
{
stat++;
}
}
if(stat == 50)
{
allRandomV();
}
}
</script>
</head>
<body onload="Loader();">
<input type="button" class="but2" id="but2" value="click over me" onclick="testForBugg();" onfocus="if(this.blur)this.blur();" />
<input type="button" id="but10" class="but1" />
<input type="button" id="but11" class="but3" />
<input type="button" id="but12" class="but1" />
<input type="button" id="but13" class="but3" />
<input type="button" id="but14" class="but1" />
<input type="button" id="but15" class="but3" />
<input type="button" id="but16" class="but1" />
<input type="button" id="but17" class="but3" />
<input type="button" id="but18" class="but1" />
<input type="button" id="but19" class="but3" />
<input type="button" id="but20" class="but3" />
<input type="button" id="but21" class="but1" />
<input type="button" id="but22" class="but3" />
<input type="button" id="but23" class="but1" />
<input type="button" id="but24" class="but3" />
<input type="button" id="but25" class="but1" />
<input type="button" id="but26" class="but3" />
<input type="button" id="but27" class="but1" />
<input type="button" id="but28" class="but3" />
<input type="button" id="but29" class="but1" />
<input type="button" id="but30" class="but1" />
<input type="button" id="but31" class="but3" />
<input type="button" id="but32" class="but1" />
<input type="button" id="but33" class="but3" />
<input type="button" id="but34" class="but1" />
<input type="button" id="but35" class="but3" />
<input type="button" id="but36" class="but1" />
<input type="button" id="but37" class="but3" />
<input type="button" id="but38" class="but1" />
<input type="button" id="but39" class="but3" />
<input type="button" id="but40" class="but3" />
<input type="button" id="but41" class="but1" />
<input type="button" id="but42" class="but3" />
<input type="button" id="but43" class="but1" />
<input type="button" id="but44" class="but3" />
<input type="button" id="but45" class="but1" />
<input type="button" id="but46" class="but3" />
<input type="button" id="but47" class="but1" />
<input type="button" id="but48" class="but3" />
<input type="button" id="but49" class="but1" />
<input type="button" id="but50" class="but1" />
<input type="button" id="but51" class="but3" />
<input type="button" id="but52" class="but1" />
<input type="button" id="but53" class="but3" />
<input type="button" id="but54" class="but1" />
<input type="button" id="but55" class="but3" />
<input type="button" id="but56" class="but1" />
<input type="button" id="but57" class="but3" />
<input type="button" id="but58" class="but1" />
<input type="button" id="but59" class="but3" />
</body>
</html>… и другия вариянт с вкарано изображение (кода е същия) …
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>like flash img</title>
<style type="text/css">
body {
background: lightgreen;
}
.but1 {
background: peachpuff;
width: 40px;
height: 40px;
}
#but2 {
position: absolute;
top: 400px;
left: 50px;
width: 120px;
}
</style>
<script language="javascript">
var myLeft = 50;
var myTop = 50;
function Loader()
{
for(i = 1; i < 6; i++)
{
for(j = 0; j < 10; j++)
{
document.getElementById('but' + i + j).style.position = 'absolute';
document.getElementById('but' + i + j).style.left = myLeft + 'px';
document.getElementById('but' + i + j).style.top = myTop + 'px';
myLeft += 40;
document.getElementById('but' + i + j).style.visibility = 'hidden';
}
myLeft = 50;
myTop += 40;
}
}
function allRandomV()
{
var myVisb;
myVisb = Math.round(Math.random() * 49) + 10;
if(document.getElementById('but' + myVisb).style.visibility == 'visible')
{
var stat = 0;
for(i = 10; i < 60; i++)
{
if(document.getElementById('but' + i).style.visibility == 'visible')
{
stat++;
}
}
if(stat < 50)
{
stat = 0;
allRandomV();
}
else
{
stat = 0;
allRandomH();
}
}
else if(document.getElementById('but' + myVisb).style.visibility == 'hidden')
{
document.getElementById('but' + myVisb).style.visibility = 'visible';
setTimeout("allRandomV()",50);
}
}
function allRandomH()
{
var myVisb;
myVisb = Math.round(Math.random() * 49) + 10;
if(document.getElementById('but' + myVisb).style.visibility == 'hidden')
{
for(s = 1; s < 6; s++)
{
for(z = 0; z < 10; z++)
{
if(document.getElementById('but' + s + z).style.visibility == 'visible')
{
s = 7;
z = 11;
allRandomH();
}
}
}
}
else if(document.getElementById('but' + myVisb).style.visibility == 'visible')
{
document.getElementById('but' + myVisb).style.visibility = 'hidden';
setTimeout("allRandomH()",50);
}
}
function testForBugg()
{
var stat = 0;
for(i = 10; i < 60; i++)
{
if(document.getElementById('but' + i).style.visibility == 'hidden')
{
stat++;
}
}
if(stat == 50)
{
allRandomV();
}
}
</script>
</head>
<body onload="Loader();">
<input type="button" class="but2" id="but2" value="click over me" onclick="testForBugg();" onfocus="if(this.blur)this.blur();" />
<img src="butt1.jpg" id="but10" class="but1" />
<input type="button" id="but11" class="but1" />
<img src="butt1.jpg" id="but12" class="but1" />
<input type="button" id="but13" class="but1" />
<img src="butt1.jpg" id="but14" class="but1" />
<input type="button" id="but15" class="but1" />
<img src="butt1.jpg" id="but16" class="but1" />
<input type="button" id="but17" class="but1" />
<img src="butt1.jpg" id="but18" class="but1" />
<input type="button" id="but19" class="but1" />
<input type="button" id="but20" class="but1" />
<img src="butt1.jpg" id="but21" class="but1" />
<input type="button" id="but22" class="but1" />
<img src="butt1.jpg" id="but23" class="but1" />
<input type="button" id="but24" class="but1" />
<img src="butt1.jpg" id="but25" class="but1" />
<input type="button" id="but26" class="but1" />
<img src="butt1.jpg" id="but27" class="but1" />
<input type="button" id="but28" class="but1" />
<img src="butt1.jpg" id="but29" class="but1" />
<img src="butt1.jpg" id="but30" class="but1" />
<input type="button" id="but31" class="but1" />
<img src="butt1.jpg" id="but32" class="but1" />
<input type="button" id="but33" class="but1" />
<img src="butt1.jpg" id="but34" class="but1" />
<input type="button" id="but35" class="but1" />
<img src="butt1.jpg" id="but36" class="but1" />
<input type="button" id="but37" class="but1" />
<img src="butt1.jpg" id="but38" class="but1" />
<input type="button" id="but39" class="but1" />
<input type="button" id="but40" class="but1" />
<img src="butt1.jpg" id="but41" class="but1" />
<input type="button" id="but42" class="but1" />
<img src="butt1.jpg" id="but43" class="but1" />
<input type="button" id="but44" class="but1" />
<img src="butt1.jpg" id="but45" class="but1" />
<input type="button" id="but46" class="but1" />
<img src="butt1.jpg" id="but47" class="but1" />
<input type="button" id="but48" class="but1" />
<img src="butt1.jpg" id="but49" class="but1" />
<img src="butt1.jpg" id="but50" class="but1" />
<input type="button" id="but51" class="but1" />
<img src="butt1.jpg" id="but52" class="but1" />
<input type="button" id="but53" class="but1" />
<img src="butt1.jpg" id="but54" class="but1" />
<input type="button" id="but55" class="but1" />
<img src="butt1.jpg" id="but56" class="but1" />
<input type="button" id="but57" class="but1" />
<img src="butt1.jpg" id="but58" class="but1" />
<input type="button" id="but59" class="but1" />
</body>
</html>… ами това е … дано да е от полза на някой. Освен това кода е мой, така че можете да го ползвате без проблеми Veryhappy … е все пак ако държите на подробностите не бих отказал една бира Winking
