悬停播放带有图像的声音 [英] Play sound on hover with image
本文介绍了悬停播放带有图像的声音的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试在列表悬停或mouseenter上播放声音.此列表的
I trying to play sound on list hover or mouseenter . this list have img inside the a
属性
此it html代码和js
this it html code and js
function playclip()
{
var audio = document.getElementsByTagName("audio")[0];
audio.play();
}
<ul id="nav1" class="widgeticons2">
<li>
<a onmouseover="playclip();" href="Statistics.aspx">
<img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" />
asdf2
</a>
</li>
<li>
<a onmouseover="playclip();" href="SMS.aspx">
<img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" alt="" />
asdfg1
</a>
</li>
</ul>
一旦我将鼠标放到它的播放声音中.转到图片并再次播放它的剧照
once i put the mouse inside a it play sound. Go to image and back to a its play again
如何只播放声音一次,直到声音消失为止
how to make sound play only one time until it go out the li itself
推荐答案
html
<audio>
<source src="../Styles/SMSKat/Sounds/Hover.mp3" />
<source src="../Styles/SMSKat/Sounds/click.mp3" />
<source src="../Styles/SMSKat/Sounds/click.ogg" />
</audio>
<ul id="nav1" class="widgeticons2">
<li class="mtrack">
<a href="Statistics.aspx">
<img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" />
asdf2
</a>
</li>
<li class="mtrack">
<a href="SMS.aspx">
<img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" alt="" />
asdfg1
</a>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
javascript
function playclip(){
var audio = document.getElementsByTagName("audio")[0];
audio.play();
}
$(document).ready(function() {
$('.mtrack').on('mouseenter',function(){
if(!$(this).hasClass('.played')){
playclip();
$(this).addClass('.played');
}
});
$('.mtrack').on('mouseleave',function(){
if($(this).hasClass('.played')){
$(this).removeClass('.played');
}
});
});
这篇关于悬停播放带有图像的声音的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文