Pereiti prie turinio

Css Jquery

Gemalas

Sukūrė Gemalas
Programuotojų kampas

 Dalintis Sekėjai 3

Rekomenduojami pranešimai

Gemalas

Gemalas 4

Sukurta
Sukurta (redaguota)

Sveiki,

Trumupi reiktu jusu pagalbos.

 

yra kvadrato formos image 96x96, tuos kvadratus noriu naudoti backgroundui viskas butu gerai jei paprastai uzdejus repeat juos isdeliotu bet man reikia kad kai mouseover jie pakeistu spalva, tai su repeat nesigauna padariau kad su jquery juos isdeliotu, viskas kaip ir gerai tik tiek kad desinei pusei lieka tarpas http://exto.lt/Untitled-2.jpg noriu paklausti kaip sutvarkyti si ta tarpa ka su css padaryti.

 

Kaip padaryti kad kai nebetelpa dar viena karta ikistu ta kvadrata.

 

Kodas kaip tai padariau, jei zinote lengvesni buda tuomet prasau pasidalinkite.

var width = $(window).width(),
	height = $(window).height();

console.log(width);
console.log(height);

//Sudedam i centrini bloka
var centrinis_plotis = width*height,
	kiek_telpa = centrinis_plotis/(96*96);

kiek_telpa = parseInt(kiek_telpa);

for (var i = kiek_telpa - 1; i >= 0; i--) {
	$("#background").append('<img src="./images/background_left.png" class="image_left">');
};

 

.image_left{
width: 96px;
height: 96px;
margin-top: -1px; 
}

Redagavo Gemalas
Nuoroda į pranešimą
Dalintis kituose puslapiuose
NuPagady

NuPagady 1.558

Atrašyta
Atrašyta

Kas jeigu, be Tavo dinamiškai sugeneruoto grid'o, dar nurodytum body background'ą (repeat) su tuo pačiu paveiksliuku? Jei gerai pareguliuotum, tiek background'o pattern'as, tiek tavo grid'as teoriškai turėtų visiškai atitikti. Kur baigiasi grid'as, matysis background'as. Tiesa, pačiame šone mouse over nebeveiktų, bet išliktų iliuzija kad kvadratai tęsiasi - greitas sprendimas.

 

Kitas būdas - prieš dedant div'ą, galima paskaičiuoti paskutinio poziciją ir patikrink ar sekantis tilps. Jei netilps, sumažink įdedamo div'o width, paskaičiavęs kiek liko vietos.

Nuoroda į pranešimą
Dalintis kituose puslapiuose
mantys89

mantys89 24

Atrašyta
Atrašyta (redaguota)

Man atrodo geriau jau daryti responsive image ir bus mažiau problemų, su skirtingom ekrano rezoliucijom. :D O tau tas fonas visas turės matytis ar uždengsi jį kitais elementais? :D Ir vienu ir kitu atveju turėtum, kažką geriau sugalvoti, nes dabar veiks neoptimaliai :)

 

Beja kodėl tu naudoji img, kai gali viską su CSS pasidaryti? :blink:

Redagavo mantys89
Nuoroda į pranešimą
Dalintis kituose puslapiuose
wicked

wicked 3.320

Atrašyta
Atrašyta

http://jsfiddle.net/ykwam/

 

#wrap pasidarai 100% width/height ir nesuki galvos, elementui pasitiunini procentalų plotį, kad gerai atrodytų stardartinėje rezoliucijoje (pvz, imant 1280 bus taip - 1280 / 96 = ~13.3% vienas kubelis) ir viskas. Jei rezoliucija mažesnė ar didesnė, tai ir kubeliai atitinkamai bus mažesni arba didesni.

Nuoroda į pranešimą
Dalintis kituose puslapiuose
NuPagady

NuPagady 1.558

Atrašyta
Atrašyta

Dar variantas - naudoti Canvas, jei reikalimgas tikslus kvadrato dydis ir pozicija, išvengiant krūvos elementų.

http://jsfiddle.net/s7DUp/

 

http://stackoverflow.com/questions/7583482/how-to-create-mouseover-highlight-box-in-html-5

 

Tiesa, tau reikėtų paskaičiuoti lango dydį prieš paišant Canvas. Lango dydžiui pasikeitus, iš naujo įkrauti.

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Gemalas

Gemalas 4

Atrašyta
  • Autorius
Atrašyta

Susiduriau su kita problema, kurios visiskai nesuprantu nes IE 9 neatvaizduoja nei vieno is kvadratu.

 

Noreciau kad uzmestumet akis gal turesit minciu.

 

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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IT SPEKTRAS</title>
<meta name="robots" content="all" />
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<script type="text/javascript" src="./js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/######.js"></script>
</head>
<body>
<table id="bbz" width="100%" height="100%" border="0" cellspacing="0" rowspacing="0">
<tr>
	<td id="left"></td>
	<td id="background_center"></td>
	<td id="right"></td>
</tr>
</table>
</body>
</html>

 

CSS

html, body {
 	overflow: hidden;
 	margin: auto 0;
background-color: #292929;
}

#left{
background:url(../images/background_center.jpg) top right repeat;
border: 0px;
}

#right{
background:url(../images/background_center.jpg) top left repeat;
margin-top: -1px;
}

#background_center{
width: 1056px;
padding: auto 0px;
margin: auto 0px;
}

.image_left{
width: 96px;
height: 96px;
margin-top: -1px;
}

#bbz{
z-index: 9999;
}

 

jQuery

 

( function(e) {
$(document).ready(function(){
var width = $(window).width(),
	height = $(window).height();

console.log(width);
console.log(height);

//Sudedam i centrini bloka
var centrinis_plotis = 1056*height,
	kiek_telpa = centrinis_plotis/(96*96)+1;

kiek_telpa = parseInt(kiek_telpa);

for (var i = kiek_telpa - 1; i >= 0; i--) {
	$("#background_center").append('<img id="' + i + '" src="./images/background_left.jpg" class="image_left">');
};

var inter = setInterval(function() {
		var id = Math.random() * kiek_telpa;
			id = parseInt(id);
				console.log("vienodi");

				$("#"+id).show(1400).attr("src", "./images/background_left_hover.jpg");

				inter = setInterval(function(){
					$("#"+id).hide(1400).attr("src", "./images/background_left_hover.jpg");
					$("#"+id).show(1400).attr("src", "./images/background_left.jpg");
					clearInterval(inter);
				}, 1400);			

		console.log(id);
		}, 3400);



});
} ) ( jQuery );

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
×
 Dalintis
Sekėjai 3
Eiti į temų sąrašą

  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

  • Prisijunk prie bendruomenės dabar!

    Uždarbis.lt nariai domisi verslo, IT ir asmeninio tobulėjimo temomis, kartu sprendžia problemas, dalinasi žiniomis ir idėjomis, sutinka būsimus verslo partnerius ir dalyvauja gyvuose susitikimuose.

    Užsiregistruok dabar ir galėsi:

    ✔️ Dalyvauti diskusijose;

    ✔️ Kurti naujas temas;

    ✔️ Rašyti atsakymus;

    ✔️ Vertinti kitų žmonių pranešimus;

    ✔️ Susisiekti su bet kuriuo nariu asmeniškai;

    ✔️ Naudotis tamsia dizaino versija;

    ir dar daugiau.

    Registracija trunka ~30 sek. ir yra visiškai nemokama.

  • Naujausios temos

  • Karštos temos

×
×
  • Pasirinkite naujai kuriamo turinio tipą...