2-КИСМ. КАВАТЛАР
Биз аллакачон каватлар янги технологиясининг асосий тушунчаларига эга булдик. Бу кисмда куйидаги мавзуларни куриб чикамиз.
• Каватдан киркиб олиш.
• Куйилган каватлар.
• Ялтирок каватлар билан турли хил самаралар олиш.
Каватлардан киркиб олиш.
Каватнинг кандайдир кисми (туртбурчак) куринадиган килиш мумкин. Бундай усул киркиб олиш дейилади. Масалан, HTML сахифасида куйидаги киркиб олиш функциясини беришимиз мумкин:
<ilayer left = 0 top = 0 clip = “20,50,110,120”>
<img scr = “daviner.jpg” width = 209 height = 264>
</ilayer>
Берилган тасвир фрагменти 90х70 улчамга эга. Clip атрибутидаги 1 чи 2 та киймат киркилаётган кисмнинг чапдан юкори бурчакни курсатада. Навбатдаги 2 та киймат пастки унг бурчакни курсатади. Java S тили ёрдамида киркилган кисмни бошкариб бундан хам кизикарли натижаларга эришиш мумкин. Аникрок айтганда Layer объектини хусусиятлари булган clip.left, clip.top, clip.right ва clip.button ларни узгартиришингиз мумкин. Агарда бу хусусиятларга янги киймат берсангиз худди шу вактнинг узида бу узгариш мос равишда кабул килинади. Куйидаги мисолда тасвирни киркиб олинган кисмини параметрлари динамик равишда узгариб туради ва фойдаланувчида тасвир аста-секин “усаётган” дай таасурот колади:
<html>
<head>
<script Language = “JavaScript”
<! - - hide
var middle x, middle y, pos;
function start ( ) {
// тасвир улчамини олади
var width = document.layers[ “ imglayer ”].document.davincn.width ;
var height = document.layers[ “ imglayer ”].document.davincn. height ;
// тасвир маркази нуктасини аниклайди
middle x = math.round ( width/2 ) ;
middle y = math.round ( height/2) ;
// дастабки позиция
// юбориш
show ( )
}
function show ( ) {
// киркилаётган кисмни улчамни катталаштириш
pos+ = 2 ; //
document.layers[ “ imglayer ”].clip.left = middle x-pos ;
document.layers[ “ imglayer ”].clip.top = middle x-pos ;
document.layers[ “ imglayer ”].clip.right = middle x+pos ;
document.layers[ “ imglayer ”].clip.buttom = middle x+pos ;
//
if ( !( ( pos middlex) && ( pos middlex )))
settimeout( “ show ( ) ”, 20 ) ;
}
// - -
</script>
</form>
<body>
< ilayer name = “ imglayer ” clip = “ 0,0,0,0 ”>
< img name = devinci scr = “ devinci.jpg ” width = 209 height = 264 >
</ilayer >
< form >
< input type = button value = “ start ” onclick = “ start( ) ”
</form>
</body>
</html>
<body> тегида тавсифланган тугмача start ( ) функциясини чакиради. Дастлаб биз ишни тасвирни кайсидир нуктасидан бошлашни аниклаймиз. Бу нуктанинг х ва у координаталарини midde x ва midde y узгарувчиларга юклаймиз. Бундан сунг биз тасвирни киркилган кисмига middeleX, middleY ва pos узгарувчиларига боглик равишда улчам берувчи show ( ) функциясини чикарамиз. Хар сафар show ( ) функцияси чакирилганда pos функцияси киймати автоматик равишда ошиб боради. Show ( ) функцияси охирида setTimeOut ( ) чакириги ёрдамида таймер урнатамиз ва бунда бу функция ва яна чакирилади. Бу жараён качонки бу киркилган кисм бутун булиб курингунча давом этади. Шу ерда Start ( ) функцияси бошида тасвирнинг улчамини олганимизни эътиборга олиб утиш керак.
Var width = document.layers[“imglayer”].document.dowiuci.width;
Var height = document.layers[“imglayer”].document.dowiuci.height;
Document.layers[“imglayer”] конструкцияси ёрдамида бу imglayer номли каватга мурожат килишимиз мумкин. Бирок нима учун document.layers[“imglayer”] дан сунг document деб ёзилади?
Гап шундаки, хар бир кават узининг HTML сахифасига яъни хар бир кават document объектига эга. Imglayer каватдаги тасвирга рухсат олиш учун биз Варакнинг колган барча майдони тоза ушбу document объектига рухсат олишимиз керак. Юкорида келтирилган мисолимизда бундай тасвир dovinci номига эга эди. булиши керак.
§
Куриб утганимиздек, кават узида бир неча объектларни мужассамлаштириши мумкин. Улар хаттоки бошка каватларни уз ичига олиши мумкин. Хакикатан эса куйилган каватлардан фойдаланишнинг бир неча сабаблари бор. Бир неча куйилган каватларни номоён килувчи мисолларни куриб чикамиз. Биринчи мисолда иккита бошка (layer1 ва layer2) кават куйилган кават (parentlayer деб номланади) ишлатилади.
Бу биринчи кават Бу иккинчи кават
Бу асосий (она) кават
Move/stopparent | Move/stoplayer | Move/stoplayer |
Сахифни очганимиздан сунг биз 3 та тугмача курамиз. Бу тугмачалар каватлар харакатини бошлаши ёки тухташи мумкин.
Энди дастлабки код скриптини курамиз:
Html
Head
<script Language = “JavaScript”
<! - - hide
// дастлабки посиция
var pos0 = 0 ;
var pos1 = -10 ;
var pos2 = -10 ;
// харакат
var move0 = true ;
var move1 = false ;
var move2 = false ;
// йуналиш
var dir0 = false ;
var dir1 = false ;
var dir2 = true ;
function startstop ( which ) {
if ( which = = 0 ) move 0 = ! move 0
if ( which = = 1 ) move 1 = ! move 1
if ( which = = 2 ) move 2 = ! move 2
}
function move ( ) {
if ( move 0 ) {
// parentlayer ни жойлаштириш
if ( dir 0 ) pos 0 - -
else pos + + ; if ( pos 0< -100) dir 0 = false ;
if ( pos 0 100 ) dir 0 = true ;
document.layers [ “ parentlayer ”].left = 100 + pos 0 ;
}
if ( move 1) {
// parentlayer ни жойлаштириш
if ( dir 1 ) pos 1- - else pos 1+ + ;
if ( pos 1 < -20 ) dir 1 = false ;
if ( pos 1 20 ) dir 1 = true ;
document.layers [ “ parentlayer ”].layers[ “ layer ”].top = 10 + pos 1 ;
}
if ( move 2) {
// parentlayer ни жойлаштириш
if ( dir 2 ) pos 2- - else pos 2+ + ;
if ( pos 2 < -20 ) dir 2 = false ;
if ( pos 2 20 ) dir 2 = true ;
document.layers [ “ parentlayer ”].layers[ “ layer 2 ”].top = 10 + pos 2 ;
}
}
// - -
< /script >
< /head >
< body onload = “ setInterval ( ‘ move ’ , 20 ) ”
< ilayer name = parentlayer left = 100 top = 0 >
< layer name = layer 2 z-index = 10 left = 0 top = -10 >
// бу 1 чи кават
< /layer >
< layer name = layer 2 z-index = 20 left = 200 top = -10 >
// бу 2 чи кават
< /layer >
< br > < br >
// бу асосий ( она ) кават
< /ilayer >
< form >
<input type = “button” value=“Move/Stopparentlayer” onclick=“startstop(0) ;”>
<input type = “button” value=“Move/Stopparentlayer1” onclick=“startstop(1) ;”>
<input type = “button” value=“Move/Stopparentlayer2” onclick=“startstop(2) ;”>
</form>
</body>
</html>
parentlayer ичида биз 2 та каватни аникладик. Булар худди кушилган каватларга эга булади. Java S тилида бу каватларга рухсатни кандай олиш мумкин. Бу кандай килинади, уни move ( ) функциясида куриш мумкин:
document.layers [ “ parentlayer ”].left = 100 + pos 0 ;
- - - - - - -
document.layers [ “ parentlayer ”].layers[ “ layer ”].top = 10 + pos 1 ;
- - - - - -
document.layers [ “ parentlayer ”].layers[ “ layer 2 ”].top = 10 + pos 2 ;
Куйилган каватларга рухсат олиш учун layer 1 ва layer 2 каватлар parentlayer ичида жойлашганлиги сабабли сизга document.layers [ “layer 1”] ёки document.layers[ “ layer 2 ”] деб ёзиш етарли булмайди.
Энди кандай килиб каватдан куринадиган майдонни куриб чикамиз. Навбвтдаги мисолда тасвирни киркиш ва жойлаштириш механизмидан фойдаланилган.
Мисолни чакириш учун ушбу тугмани босинг:
Test it |
Скриптни дастлабки коди :
<html>
<head>
<script language = “ JavaScript ” >
< ! - - hide
var pos = 0 ; //дастлабки холат
var direction = false ;
function move n clip ( ) {
if ( pos < -180 ) direction = true ;
if ( pos 40 ) direction = false ;
if ( direction ) pos + = 2 ;
else pos - = 2 ;
document.layers [ “ clippinglayer ”].layers[ “ imglayer ”].top = 100 + pos ;
}
// - -
</script>
</head>
< body onload = “ setInterval ( ‘ moveNclip ( )’ , 20 ) ; ”
< ilayer name =“clippinglayer” z-index = 0 clip = “ 20,100,200,160 ” top = 0 left = 0 >
< ilayer name =“ imglayer ” top = 0 left = 0 >
< img name = devici scr = “ davinci.jpg ” width = 209 height = 204 >
</ilayer>
</ilayer>
</body>
</html>
Ва яна куйилган каватга мурожатларни куриш мумкин:
document.layers [ “ clippinglayer ”].layers[ “ imglayer ”].top = 100 + pos ;
скриптнинг колган элементлари билан аллакачон таниш булишингиз керак.
Copyright © Joomla Inc. All Rights Reserved.
E-DASTUR.UZ - 2010 
Professional Templates
