0

Web ページ上のビデオのサイズを変更するボタンが必要です。ボタンは、最初のクリックでビデオを大きくし、2 回目のクリックでビデオを小さくする必要があります。ビデオを大きくするか小さくするかを追跡する変数が必要であることは理解しています。

<!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>
4

1 に答える 1

2

クリックイベントでこの関数をアタッチします。

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

http://jsfiddle.net/uNLHL/

于 2013-05-02T23:51:41.520 に答える