一个简单有趣的页面 Do you love me

#一个简单有趣的页面 Do you love me

---

###首先是主体部分

本来是在一个素材网上看见的特效，觉得有趣就自己也做了一下。

具体特效就是：每当鼠标移动到No上时，这个方框就移动到页面的其他地方,永远也点不到No。

当点击Yes时会弹出另一个页面写着：I love you too！

<div id="div1">
	<p>Do you love me ?</p>
    <input type="button" id="btn1" value="No"/>
    <input type="button" id="btn2" value="Yes"/>
</div>
<div id="div2">
	<p>I love you too !</p>
    <input type="button" id="btn3" value="Yes"/>
</div>

设置这个大的方框为div1，里面只有一个p标签写着Do you love me? 这样一句话，然后再加上两个按钮。

div2是与div1大小一样的方框，只有一个p标签写着：I love you too！ 还有一个按钮。

$("btn1").onmouseover=function(){
	$("div1").style.top=Math.random()*600+"px";
	$("div1").style.left=Math.random()*1200+"px";
}
$("btn2").onclick=function(){
	$("div2").style.display="block";
	$("div1").style.display="none";
}
$("btn3").onclick=function(){
	$("div2").style.display="none";
	$("div1").style.display="block";	
}

当鼠标移入No这个按钮上时，令div1（大方框）的position改变，利用随机值组合使div1在页面上无序移动。

当点击Yes这个按钮时，把div1隐藏，使div2出现。当点击div2上的Yes按钮时，div2消失的同时div1再次出现。

---

###背景音乐部分

图一

图二

图三

设置两首背景音乐，并且重新布局了一个播放操作。播放操作在页面的左侧隐藏，只有一个小标签样式，如图一。

当鼠标移动到小标签上时，会如图二一样显示出来。当鼠标移开整个播放操作块1秒后，播放操作又会隐藏起来如图一。

<audio loop autoplay src="music/Because I.mp3" id="audio1"></audio>
<div id="music">
	<div id="play"><img src="img/pause2.png" id="img1"/></div>
	<div id="stop"><img src="img/stop2.png" /></div>
	<div id="forward"><img src="img/forward2.png" /></div>
	<div id="backward"><img src="img/backward2.png" /></div>
    <div id="tip"></div>
</div>

这是播放操作块的布局，tip是图一所示的小标签，利用定位的right:-20px。

music这个块被定位为left:-50px。

var oOn=true;
$("play").onclick=function(){
	if(oOn){
		$("audio1").pause();
		$("img1").src="img/play2.png";
	}else{
		$("audio1").play();
		$("img1").src="img/pause2.png";
	}
	oOn=!oOn;
}

因为背景音乐是打开页面后自动播放的，所以一开始的play按钮显示的是暂停，如 。
所以当点击play(pause)按钮时，歌曲暂停，且图片切换为 。
利用布尔值开关达到切换自如的效果。

$("stop").onclick=function(){
	$("audio1").pause();
	$("audio1").currentTime=0;
	$("img1").src="img/play2.png";
	oOn=false;
}

点击stop（停止）按钮，使歌曲暂停并且回到最初播放0:00的状态。这时需要使play按钮的图片改变为 。

并且使布尔值开关为false，这样再次点击play按钮时就会播放音乐。（再进行if判断时，因为oOn为false所以会直接进入else中，

就能进行播放了。若不写此步骤，会发现需要点击两次play才能播放）

$("forward").onclick=function(){
	$("audio1").currentTime=$("audio1").currentTime+3;
}
$("backward").onclick=function(){
	$("audio1").currentTime=$("audio1").currentTime-3;
}

点击forward(快进)和backward(快退)按钮会使时间分别加快3秒和倒退3秒。

感觉这两个按钮作用不大，只是为了美观。

var timer=null;
$("music").onmouseover=function(){
	clearTimeout(timer);
	$("music").style.left="0px";
}
$("music").onmouseout=function(){
	timer=setTimeout(function(){
		$("music").style.left="-50px";	        
	},1000);
}

这是播放操作出现和隐藏的代码，主要是music这个块的定位的移动，还加了一个定时器。

$("btn2").onclick=function(){
	$("div2").style.display="block";
	$("div1").style.display="none";
	$("audio1").src="music/好想你.mp3";
	$("img1").src="img/pause2.png";
	oOn=false;
}

比较特殊的是当点击div1上的Yes后，随着div2的出现背景音乐也改变了。

为防止在点击Yes时，背景音乐已被暂停，而点击Yes后音乐又是自动播放，所以把play的图片默认更改为 表示正在播放。

并且如点击stop时一样默认更改了布尔值开关（oOn）的值,防止出现两次点击才能暂停的错误。

---

大概就先写到这里，等有了新进展再写。