fejléc
Gyakori kérdések Belépés Új kérdés Véletlen kérdés
Keresés
Kezdőoldal » Számítástechnika » Weblapkészítés » Hozzáértők! Ezt hogyan kell...

Hozzáértők! Ezt hogyan kell megcsinálni CSS vagy esetleg javascriptben? Kurzor hatására forgó téglalap alakú"div"?

Figyelt kérdés

Van egy videóhátterem, és egy elválasztó sávom, ahova a feliratokat tettem, azt szeretném, hogy az elválasztó sáv ferde helyzetből kiindulva a kurzor hatásának megfelelően mozogjon


Az az elképzelésem, hogy létrehozok egy "div"-et és azt forgatom, de az a baj, hogy ahogy forog a "div" kitolja az ablakot


konkrétan ez a helyzet(a "div" túl növi magát az ablakon és meg lehet nézni hol a vége): [link]


ezt szeretném(akárhogy forog a "div" nem tudom megnézni hol végződik)

[link]


és ez történne, ha mozgatom az egeret:

[link]


ez a következő dolog, amit meg szeretnék oldani, de amíg az első problémát nem oldom meg, addig ennek nem tudok nekiállni


köszönöm!



#weboldal #programozás #fejlesztés #szerkesztés #HTML #CSS #design #Code #div #kód
2014. dec. 21. 21:37
❮ 1 2 3
 21/26 anonim ***** válasza:

Bocs, elírtam egy sort:


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>JS Bin</title>

<style>

body{

overflow: hidden;

}

#white {

position:absolute;

background-color: white;

}


#frame {

overflow: hidden;

background-color: green;

color:white;

}


</style>

</head>

<body >

<div id="frame" onmousemove="mousemove(event);">

<div id="log"></div>

<div id="white"></div>

</div>


<script>



var white = document.getElementById("white");

var frame = document.getElementById("frame");

var log = document.getElementById("log");


frame.style.width = window.innerWidth+"px";

frame.style.height = window.innerHeight+"px";


white.style.height = Math.round(window.innerHeight)*2+"px";

white.style.width = Math.round(window.innerHeight)*2+"px";

white.style.top = -Math.round(window.innerHeight)/2+"px";

white.style.left = Math.round(window.innerWidth/2)+"px";


var degree = -15;


function mousemove(event){


var degree = (30*(event.clientX/window.innerWidth))-15;


log.innerHTML = degree;


white.style.webkitTransform="rotate("+Math.round(degree)+"deg)";

white.style.msTransform="rotate("+Math.round(degree)+"deg)";

white.style.MozTransform="rotate("+Math.round(degree)+"deg)";

white.style.OTransform="rotate("+Math.round(degree)+"deg)";

white.style.transform="rotate("+Math.round(degree)+"deg)";


}


function mouseout(){


var degree = -15;


white.style.webkitTransform="rotate("+Math.round(degree)+"deg)";

white.style.msTransform="rotate("+Math.round(degree)+"deg)";

white.style.MozTransform="rotate("+Math.round(degree)+"deg)";

white.style.OTransform="rotate("+Math.round(degree)+"deg)";

white.style.transform="rotate("+Math.round(degree)+"deg)";


}


mousemove();


</script>

</body>

</html>

2014. dec. 22. 12:40
Hasznos számodra ez a válasz?
 22/26 anonim ***** válasza:
JA és vedd ki a kerekítést (Math.round) és finomabb lesz a mozgás.
2014. dec. 22. 12:44
Hasznos számodra ez a válasz?
 23/26 A kérdező kommentje:

Na ez baromi jól néz ki :D


Hogyan tudnám én ezt, reszponzívvá tenni(ha kicsinyítem az ablakot akkor kisebb lesz ez az alakzat is)?


a értékjelzőt hogy tudom eltüntetni?


És az miért van, hogy egy vékony, fehér kerete van, a zöld doboznak?

2014. dec. 22. 13:03
 24/26 anonim ***** válasza:

Ez rezsponzív. Próbáld ki más felbontáson. :)


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>JS Bin</title>

<style>

body{

overflow: hidden;

text-align: left;

background-color: black;

}

#white {

position:absolute;

background-color: white;

}


#frame {

position: absolute;

top: 0px;

left: 0px;

overflow: hidden;

margin: 0px;

background-color: green;

color:white;

}


</style>

</head>

<body >

<div id="frame" onmousemove="mousemove(event);">

<div id="log"></div>

<div id="white"></div>

</div>


<script>



var white = document.getElementById("white");

var frame = document.getElementById("frame");

var log = document.getElementById("log");


frame.style.width = window.innerWidth+"px";

frame.style.height = window.innerHeight+"px";


white.style.height = Math.round(window.innerHeight)*2+"px";

white.style.width = Math.round(window.innerHeight)*2+"px";

white.style.top = -Math.round(window.innerHeight)/2+"px";

white.style.left = Math.round(window.innerWidth/2)+"px";


var degree = -15;


function mousemove(event){


var degree = (30*(event.clientX/window.innerWidth))-15;


log.innerHTML = degree;


white.style.webkitTransform="rotate("+Math.round(degree)+"deg)";

white.style.msTransform="rotate("+Math.round(degree)+"deg)";

white.style.MozTransform="rotate("+Math.round(degree)+"deg)";

white.style.OTransform="rotate("+Math.round(degree)+"deg)";

white.style.transform="rotate("+Math.round(degree)+"deg)";


}


function mouseout(){


var degree = -15;


white.style.webkitTransform="rotate("+degree+"deg)";

white.style.msTransform="rotate("+degree+"deg)";

white.style.MozTransform="rotate("+degree+"deg)";

white.style.OTransform="rotate("+degree+"deg)";

white.style.transform="rotate("+degree+"deg)";


}


mousemove();


</script>

</body>

</html>

2014. dec. 22. 13:10
Hasznos számodra ez a válasz?
 25/26 anonim ***** válasza:
Tényleg, azt mondjuk nem tudom hogy hogy fogod mobileszközre elérhetővé tenni.
2014. dec. 22. 13:14
Hasznos számodra ez a válasz?
 26/26 A kérdező kommentje:
Ez most nekem tokeletes, sikerult beleraknom az oldalra, szuper, koszonom!!
2014. dec. 22. 17:29
❮ 1 2 3

Kapcsolódó kérdések:

Számítástechnika főkategória kérdései »
Számítástechnika - Weblapkészítés kategória kérdései »



Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!