2013-05-02 114 views
0

我需要一個可以調整網頁視頻大小的按鈕。按鈕必須在第一次點擊時使視頻變大,然後在第二次點擊時使視頻變小。我知道我需要一個變量來跟蹤視頻是應該變大還是變小。調整視頻的大小javascript

<!DOCTYPE html> 
<html> 
<head> 
<title>Simple animations in HTML5</title> 
</head> 
<body> 
<h2> Optical Illusion </h2> 
<video id="illusion" width="640" height="480" controls> 
    <source src="Illusion_movie.ogg"> 
</video> 

<div id="buttonbar"> 
<button onclick="changeSize()">Big/Small</button> 
</div> 

<p> 
Watch the animation for 1 minute, staring at the centre of the image. Then look at   something else near you. 
For a few seconds everything will appear to distort. 
Source: <a href="http://en.wikipedia.org/wiki/File:Illusion_movie.ogg">Wikipedia:Illusion  movie</a> 
</p> 

<script> 
var myVideo=document.getElementById("illusion"); 
var togglesize = false 

if togglesize == true 
{ 
function changeSize() 
{ 
myVideo.width=800; 
togglesize = false; 
} 
} 
else 
{ 
function changeSize() 
{ 
myVideo.width = 400; 
togglesize = true; 
} 
} 
</script> 
</body> 
</html> 

回答

2

在click事件上附加此函數;

var littleSize = false; 
function changeSize() 
{ 
    myVideo.width = littleSize ? 800 : 400; 
    littleSize = !littleSize;//toggle boolean 
} 

http://jsfiddle.net/uNLHL/

+0

好一個感謝您的幫助! – user1554786 2013-05-02 23:54:50