JS - onmousemove 等
在每篇文章的末尾加了个小狗的图片,然后为鼠标设置事件。
当鼠标触屏到小狗时,播放一段音效。
整体代码
<img onmousemove="zhwa()" src="http://omuy6viz3.bkt.clouddn.com/2017/04/2465836691.gif">
</img>
<script>
function zhwa() {
document.getElementById("zhw").play();
}
</script>
<audio id="zhw">
<source src="http://omuy6viz3.bkt.clouddn.com/2017/04/1925917193.mp3">
</audio>
更多效果请点击文章末尾的小狗试试吧。
拓展
<img onmousemove="zhwa()" onmouseout="zhwb()" src="http://omuy6viz3.bkt.clouddn.com/2017/04/2465836691.gif" alt="zhw.gif" width="100px" height="100px">
</img>
<script>
function zhwa() {
document.getElementById("zhw").play();
}
function zhwb() {
document.getElementById("zhw").pause();
}
</script>
<audio id="zhw">
<source src="http://omuy6viz3.bkt.clouddn.com/2017/04/1925917193.mp3" type="audio/mpeg">
</audio>
鼠标滑过 li 时的音效 js ,且设置音量为 10%
<script>
$('ul li').mouseover(function(){
document.getElementById("lipaly").volume = 0.1;
document.getElementById("lipaly").play();
});
</script>
<audio id="lipaly">
<source src="http://omuy6viz3.bkt.clouddn.com/2017/05/3670407252.mp3" type="audio/mpeg">
</audio>