2016-08-18 20 views
5

mam ten kod:javascript: W jaki sposób obrócić tekst za pomocą javascript?

<img src="http://www.w3schools.com/html/html5.gif" id="imgid"> 
 
<h1 id='header'>Example</h1> 
 
<!--This is an example html doc not the real thing!--> 
 
<button onclick="spin(document.getElementById('header'));spin(document.getElementById('imgid'));">Spin!</button> 
 
<script> 
 
    function spin(object) { 
 
    setInterval(function() { 
 
     object.style.transform += "rotate(10deg)"; 
 
    }, 1); 
 
    } 
 
</script>

Jak zrobić spin tekst poprawnie? Jeśli mógłbyś wyjaśnić, jak to działa, byłoby wspaniale. Jeśli potrzebujesz żadnych odniesień do moich źródeł wówczas:

przez "poprawnie" mam na myśli przędzenia wyśrodkowany. (Nie wszystkie na stronie).

Dzięki!

+3

Co oznacza "spin poprawnie"? Na pewno się kręci – j08691

+1

Prawdopodobnie będziesz musiał zmienić rozmiar elementu tekstowego i zmienić jego własność 'transform-origin'. – Titus

+0

Wyjaśniłem, kręcąc poprawnie definicją po referencjach – DecstarG

Odpowiedz

2

Spróbuj tego. Głównym problemem było to, że szerokość rozciągała się na całej stronie, która zawadziła o rotację, więc dodanie wyświetlania: wbudowany blok spowodował, że szerokość pasowała do zawartości div.

<style> 
#imgid{display:inline-block;} 
#myDIV{display:inline-block;} 
</style> 

<html> 
    <head> 
     <title>Example</title> 
    </head> 

    <body> 
     <div><img src="http://www.w3schools.com/html/html5.gif" id="imgid"></div> 
     <div><h1 id='myDIV'>Example</h1></div> 
     <div><button onclick="spin(document.getElementById('imgid'));spin(document.getElementById('myDIV'));">xdfdsf</button></div> 
    </body> 
</html> 

<script> 
function spin(object) 
{ 
    setInterval(function() 
    { 
     object.style.transform += "rotate(10deg)"; 
    }, 1); 
} 
</script> 
Powiązane problemy