Lynx Posted January 13, 2008 Report Share Posted January 13, 2008 Man ir situācija, kur nepieciešams kustināt 6000x3000px lielu <div> elementu, kuram iekšā atrodas karte. <html> ir norādīts overflow: hidden; Tas nozīmē, ka uz ekrāna no <div> ir redzama tikai tā daļa, kas ietilpst ekrānā. Piemēram 990x680px. Uz 1024x768 lielu izšķirtspēju. Es izveidoju ļoti prastu js kodu, kurš darbojas. Un 8us elementus: <div style="position: absolute;" onmouseover="MapScroll();" onmouseout="StopMapScroll();"> ar kuru palīdzību tiek iedarbināts scrollings uz norādīto pusi, iespējami arī divi virzieni reizē, piem: topleft; Tapēc arī tiek izmantots indexof(); Problēma rodas performancē: netiek šis div kustināts plūstoši, bet ļoti saraustīti ar neregulāriem intervāliem. Varbūt ir citi risinājumi kā šo elementu kustināt, nepieskaitot klāt pikseļus, bet izmantojot kādas citas iebūvētās funkcijas vai tehnoloģijas? Vai vienkārši kādas koda optimizācijas? Galvenais iemesls, kapēc man nesanāca izmantot populāros scrollošanas risinājumus, piem: scrollBy(0, 50); ir tāds, ka nedrīkst pārvietot jau šos 8 minētos elementus, kas iedarbina kustināšanu + pārējos interfeisa elementus. Lapai kods izskatās aptuveni šāds: <html><div id="interface"></div> <div id="map"></div> </html> Nepieciešams kustināt tikai id="map". function MapScroll(obj, direction) { object = document.getElementById(obj); if(!window.MapScroll_speed) //initializejam, veicam nelielu pauzi, lai neiedarbinaatu scrolloshanu netisham { window.MapScroll_speed = 10; window.MapScroll_timer = setTimeout("MapScroll('" + obj + "', '" + direction + "');", 500); } else { if(object) { scrollObjTop = parseInt(object.style.top); scrollObjLeft = parseInt(object.style.left); if(direction.indexOf('top') !=-1) { object.style.top = scrollObjTop * 1 + window.MapScroll_speed * 1 + 'px'; } if(direction.indexOf('bottom') !=-1) { object.style.top = scrollObjTop * 1 - window.MapScroll_speed * 1 + 'px'; } if(direction.indexOf('right') !=-1) { object.style.left = scrollObjLeft* 1 - window.MapScroll_speed * 1 + 'px'; } if(direction.indexOf('left') !=-1) { object.style.left = scrollObjLeft* 1 + window.MapScroll_speed * 1 + 'px'; } window.MapScroll_speed += 3; //palielinam atrumu window.MapScroll_timer = window.setTimeout("MapScroll('" + obj + "', '" + direction + "');", 30); } } } function StopMapScroll() { if(window.MapScroll_timer) { clearTimeout(window.MapScroll_timer); window.MapScroll_speed = null; } } Link to comment Share on other sites More sharing options...
Delfins Posted January 13, 2008 Report Share Posted January 13, 2008 Iebūvētās tehnoloģijas, tas būtu standarta scrollbars. Tādiem gadījumiem vajadzētu izmantot tieši iframe, jo browsers pēc defaultā `hardwariski` renderēs skrollēšanu.. nevis ar JS imitēs kaut kādu purkšķināšanu. Tās ir tikai manas domas :) Link to comment Share on other sites More sharing options...
mefisto Posted January 13, 2008 Report Share Posted January 13, 2008 http://demos.mootools.net/Scroller http://demos.mootools.net/Fx.Scroll Atkarībā ko tev īsti vajag. Link to comment Share on other sites More sharing options...
bubu Posted January 13, 2008 Report Share Posted January 13, 2008 Drusku nesaprotu, kas un kā, bet vai ar parastu scroll baru nevar? <body><head> <style> #map { overflow: scroll; width: 200px; height: 200px; } </style> </head> <body> <div id="map"><img src="big_image.jpeg"/></div> <input type="button" value="up" onclick="document.getElementById('map').scrollTop -= 10;"/> <input type="button" value="down" onclick="document.getElementById('map').scrollTop += 10;"/> ... </body> </html> Ja negribās redzēt pašus scroll barus uz ekrāna, tad to "scroll" vērtību aizstāj ar "hidden". Edit: mefisto jau pasteidzās :) Link to comment Share on other sites More sharing options...
Lynx Posted January 13, 2008 Author Report Share Posted January 13, 2008 O izcili, šādi arī biju meiģinājis taisīt, bet pieļāvu būtisku kļūdu risinājumā, tāpēc nesanāca. Tavs piemērs, bubu, palīdzēja - kodu upgreidoju. Paldies Link to comment Share on other sites More sharing options...
bubu Posted January 13, 2008 Report Share Posted January 13, 2008 Un vai ir ātrāk/labāk/performancīgāk (ko nu tur tev vajadzēja)? Link to comment Share on other sites More sharing options...
Lynx Posted January 13, 2008 Author Report Share Posted January 13, 2008 Jā, strādā effektīvāk un bez nekādas aizķeršanās :) Godīgi sakot pat šādi sanāk daudz vieglāk saprotams kods. Jo vecajā variantā, ja mums vajadzēja parādīt kādu kartes elementu ekrāna redzamajā daļā, vajadzēja mainīt top un left kordinātas, un parasti tas izskatījās šādi: top: -1253px; left: -3200px;(Ļoti neglīti piesārņo html, manuprāt). Kā arī varēja izscrollot to divu ārpus ekrāna pa visam. Jaunais variants pagaidām visas problēmas ir atrisinājis. Link to comment Share on other sites More sharing options...
Kavacky Posted January 13, 2008 Report Share Posted January 13, 2008 Principā jau negatīvas koordinātas kā tādas neko nepiesārņo. Link to comment Share on other sites More sharing options...
Recommended Posts