2012-04-06 18 views
0

私は、円形の道の周りに4画像を移動するためのコードを次しているが、それは私が何ができる唯一の2 円形の方法で動画を

それらの
<html> 
<head> 
<title>Moving div</title> 
</head> 
<body> 
<div id = "listDiv"> 
    <img id="img1" width="200" height="200" /><br /> 
    <span id="quote1" ></span> 
</div> 
<div id="listDiv1"> 
<img id="img2" width="200" height="200"/><br/> 
<span id="quote2 "></span> 
</div> 
<div id="listDiv2"> 
<img id="img3" width="200" height="200"/><br/> 
<span id="quote3 "></span> 
</div> 
<div id="listDiv3"> 
<img id="img4" width="200" height="200"/><br/> 
<span id="quote4 "></span> 
</div> 

<script> 

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

var lisDiv1=document.getElementById("listDiv1"); 
var listDiv2=document.getElementById("listDiv2"); 
var listDiv3=document.getElementById("listDiv3"); 
var quote1 = document.getElementById("quote1"); 
var quote2 = document.getElementById("quote2"); 
var quote3 = document.getElementById("quote3"); 
var quote4 = document.getElementById("quote4"); 
var img1 = document.getElementById("img1"); 
var img2 = document.getElementById("img2"); 
var img3 = document.getElementById("img3"); 
var img4 = document.getElementById("img4"); 
listDiv.style.backgroundColor = "lightBlue"; 


listDiv.style.position = "absolute"; 
listDiv1.style.position = "absolute"; 
listDiv2.style.position = "absolute"; 
listDiv3.style.position = "absolute"; 

var intervalHandle = setInterval(changeSecond, 10); 

var counter=0; 

var pics = [ 
"http://www.dyslexiaassociation.ca/gallery/famous/AlbertEinstein.jpg", 
"http://www.historyking.com/images/Black-Famous-People.jpg", 
"http://www.historyking.com/images/Famous-People-From-Washington.jpg", 
"http://baobongdaso24h.com/wp-content/uploads/2011/10/Steve-Jobs-chet1.jpg", 
"http://www.stgabss.net/SpecialNeeds/images/stories/famous/john_lennon_portrait.jpg", 
"http://imgs.inkfrog.com/pix/just4kids2/President-George-W-Bush_mprtp.jpg", 
"http://www.smilorama.com/img/people/rare_photos_of_famous_people/rare_photos_of_famous_people04.jpg" 
]; 

var quotes = [ 
'E=mc<sup style="font-size:xx-small">2</sup>', 
"I have a dream", 
"Be nice to nerds.<br/>Chances are you'll<br/>end up working for one", 
"You are holding it wrong", 
"Imagine all the people", 
"I know the human being<br/>and fish can coexist peacefully.", 
"The name is Bond, James Bond" 
]; 


function changeSecond(){ 
    if (counter++%2==0){ 
    if (counter>700){ 
     counter=0; 
    } 
    //change the text every 101 counts 
    if (counter%101==0){ 
     var randomIndex = Math.floor(Math.random()*pics.length); 
     img1.setAttribute("src", pics[randomIndex]); 
     quote1.innerHTML=quotes[randomIndex]; 
     img2.setAttribute("src", pics[randomIndex]); 
     quote2.innerHTML=quotes[randomIndex]; 
     img3.setAttribute("src", pics[randomIndex]); 
     quote3.innerHTML=quotes[randomIndex]; 
     img4.setAttribute("src", pics[randomIndex]); 
     quote4.innerHTML=quotes[randomIndex]; 
    } 
    //move the element to the left: 
    listDiv.style.left =400+200*Math.cos(counter/90)+"px"; 
    //move the element down: 
    listDiv.style.top =400+200*Math.sin(counter/90)+"px"; 
     listDiv1.style.left =400 + 300* Math.cos(counter/90)+"px"; 
     listDiv1.style.top =400 + 200 * Math.cos(counter/90)+"px"; 
     listDiv2.style.left =400 + 200 * Math.cos(counter/90)+"px"; 
     listDiv2.style.top =400 + 200 * Math.cos(counter/90)+"px"; 
     listDiv3.style.left =400 + 200 * Math.cos(counter/90)+"px"; 
     listDiv3.style.top =400 + 2width="200" height="200"00 * Math.cos(counter/90)+"px"; 
    } 
} 


</script> 
</body> 
</html> 

を回転させることができますか?

答えて

1

すべての4が表示されないような単純なエラーがいくつかあります。

一つは、これがエラーを起こしていた、あなたが引用符のためのいくつかのためのスパンのIDにスペースを持っているということです。スペースを削除

<span id="quote2 "></span> 
<span id="quote3 "></span> 
<span id="quote4 "></span> 

が必要だったし、それが発生したエラーをクリア。そして、そこにタイプミスであるか、ここに過去の過ちをコピーします。

幅=高さ=ビットは、投稿や、一方で、おそらくペースト間違いですが、アウトする必要があること
listDiv3.style.top =400 + 2width="200" height="200"00 * Math.cos(counter/90)+"px"; 

これは3時にきれいに表示されていますので、それはちょうどあなたが4人いると思われますが、2人は友人に覆われているようです。

listDiv.style.left =400+200*Math.cos(counter/90)+"px"; 
listDiv.style.top =400+200*Math.sin(counter/90)+"px"; 

listDiv1.style.left =400 + 300 * Math.cos(counter/90)+"px"; 
listDiv1.style.top =400 + 200 * Math.cos(counter/90)+"px"; 

listDiv2.style.left =400 + 400 * Math.cos(counter/90)+"px"; 
listDiv2.style.top =400 + 200 * Math.cos(counter/90)+"px"; 

listDiv3.style.left =400 + 500 * Math.cos(counter/90)+"px"; 
listDiv3.style.top =400 + 200 * Math.cos(counter/90)+"px"; 

これは見て非常に良いではなかったが、それが得た:

は(私は左が計算の一部として200、300、400、500を持って作られた)このように、それぞれの出発点を変更してみてくださいそれらは明らかにされ、あなたはそれを遊び、彼らをより良くアレンジすることができます。

ほんの少し役に立ちます

関連する問題