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>
返回文章列表 打赏
本页链接的二维码
打赏二维码
期待你的评论