按钮点击后通过js播放按键音效
如图，按下 下一页或者上一页后有按键音效，代码如下，请问该如何实现。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery长文本分页特效 </title>
<link href="textify.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.hidden {
display: none;
}
body{
width:100%;
height:100%;
margin:0;
padding:0;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.wrapper {
margin: 0 auto;
min-width:100%;
width: 90%;
}
.wrapContent{
width:100%;
float:left;
padding-bottom:60px;
}
.wrapContent .features{
list-style:none;
margin:0;
padding:0;
width:100%;
float:left;
}
.wrapContent .features li{
float:left;
width:25%;
}
.wrapContent .features li p, h4{
padding:0 10px;
color:#575757;
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
font-size:13px;
}
.wrapContent .features h4{
font-size:16px;
font-weight:bold;
margin:20px 0 8px;
}
.bg1{
background:url(../images/demo-images/bg_spot.png) bottom left no-repeat;
}
.bg2{
background:url(../images/demo-images/bg_spot2.png) bottom center no-repeat;
}
#main-header {
color: #000000;
margin-bottom: 16px;
margin-top: 16px;
position:relative;
}
.col{
font-family: league-gothic,sans-serif;
font-size: 14px;
line-height: 22px;
margin-left: 50px;
margin-top: 20px;
text-align: left;
}
.span_6 {
margin-left: 0;
width: 100%;
}
#logo {
float: left;
}
#content-logo {
float: left;
}
#content-logo h1{
display:block;
margin:0;
padding:0;
text-transform:uppercase;
margin:5px 0 0 15px;
color:#666;
}
#content-logo h4{
display:block;
margin:0;
padding:0;
text-transform:uppercase;
margin:5px 0 0 20px;
font-size:11px;
color:#ccc;
}
.full-width-wrap {
background:#EEEEEE;
padding: 16px 0 60px 0;
width: 100%;
float:left;
}
.full-width-wrap-white {
padding: 15px 0 0 0;
width: 100%;
float:left;
}
.longText {
float:left;
font-size:14px;
line-height:22px;
font-family: league-gothic,sans-serif;
text-align:left;
width:600px;
height:500px;
background:#ffffff;
margin-right:20px;
border:5px solid #ccc;
}
.longText2 {
float:left;
font-size:14px;
line-height:30px;
font-family:"黑体";
text-align:left;
width:100%;
height:575px;
}
a.action-button {
background: none repeat scroll 0 0 #DADADA;
color: #CC0000;
padding: 8px 12px 9px;
text-decoration: none;
}
a.action-button:hover {
background: none repeat scroll 0 0 #CC0000;
color: #FFFFFF;
text-decoration: none;
}
p{
margin:13px 0 0 0;
}
h2 {
font-size: 24px;
line-height: 26px;
margin: 0 0 12px;
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
}
#testbootem{
width:600px;
height:98px;
margin-left: auto;
margin-right: auto;
}
#pagepr{
width:250px;
height:98px;
margin-top:10px;
float:left;}
#pagenext{
width:250px;
height:98px;
float:left;
}
#pageData{
width: 50px;
height: 70px;
float: left;
font-family: "黑体";
font-size: 24px;
margin-top: 20px;
color: #F00;
margin-left:50px;
}
#pre{width:250px; height:98px;
display:none;background-image:url(ntfy_pre_btndn.png);float:left}
#next{width:250px; height:98px; display:block;background-image:url(ntfy_next_btndn.png);float:left}
#pre:visted{background-image:url(ntfy_pre_btndn.png);}
#next:visted{background-image:url(ntfy_next_btndn.png);}
#pre:hover{background-image:url(ntfy_pre_btndn_over.png);}
#next:hover{background-image:url(ntfy_next_btndn_over.png);}
#pre:active{background-image:url(ntfy_pre_btndn.png);}
#next:active{background-image:url(ntfy_next_btndn.png);}
</style>
<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="textify-min.js"></script>
<script type="text/javascript">
$(document)
.ready(function () {
$('.longText')
.textify({
numberOfColumn: 2,
margin: 20,
padding: 15,
width: "auto",
height: "auto",
showNavigation: true,
textAlign: 'justify'
})
$('.longText2')
.textify({
numberOfColumn: 1,
margin: 20,
padding: 15,
width: "auto",
height: "auto",
showNavigation: true,
textAlign: 'justify'
})
function PlaySound(url) {
document.all.sound.src = url;
}
$("#next").click(function() {
if($("li.selected").next().click().is(':last-child')) { // 最后一页
$(this).hide();
}
$("#pre").show();
});
$("#pre").click(function() {
if($("li.selected").prev().click().is(':first-child')) { // 第一页
$(this).hide();
}
$("#next").show();
});
setInterval("ceshi()",100);
}
)
function ceshi(){
var numd =$("ul li").length;
if(numd==1){
$("#pre").hide();
$("#next").hide();
}
}
</script>
</head>
<body>
<div class="full-width-wrap-white clearfix">
<div class="wrapper">
<div class="longText2"><font face="黑体" size="6"><table><td><tr><td>请确认你的存款信息：</td></tr></td><td><tr><td>姓名：李四</td></tr></td><td><tr><td>证件号码：350595198204043584</td></tr></td><td><tr><td>地址：北京市朝阳区</td></tr></td><td><tr><td>住址：北京市朝阳区大同路25号4#106</td></tr></td><td><tr><td>帐号：9559123456789789</td></tr></td><td><tr><td>存款金额：10000元</td></tr></td><td><tr><td>余额：88888元请确认你的存款信息：</td></tr></td><td><tr><td>姓名：李四</td></tr></td><td><tr><td>证件号码：350595198204043584</td></tr></tr></td><td><tr><td>帐号：9559123456789789</td></tr></td><td><tr><td>存款金额：10000元</td></tr></td><td><tr><td>余额：88888元请确认你的存款信息：</td></tr></td><td><tr><td>姓名：李四</td></tr></td><td><tr><td>证件号码：350595198204043584</td></tr></tr></td><td><tr><td>帐号：9559123456789789</td></tr></td><td><tr><td>存款金额：10000元</td></tr></td><td><tr><td>余额：88888元请确认你的存款信息：</td></tr></td><td><tr><td>姓名：李四</td></tr></td><td><tr><td>证件号码：350595198204043584</td></tr></tr></td><td><tr><td>帐号：9559123456789789</td></tr></td><td><tr><td>存款金额：10000元</td></tr></td><td><tr><td>余额：88888元请确认你的存款信息：</td></tr></td><td><tr><td>姓名：李四</td></tr></td><td><tr><td>证件号码：350595198204043584</td></tr></tr></td><td><tr><td>帐号：9559123456789789</td></tr></td><td><tr><td>存款金额：10000元</td></tr></td><td><tr><td>余额：88888元请确认你的存款信息：</td></tr></td><td><tr><td>姓名：李四</td></tr></td><td><tr><td>证件号码：350595198204043584</td></tr></table></font> </div>
</div>
<div id="testbootem">
<div id="pagepr">
<a href="#" id="pre" class="hidden" PlaySound('beep.wav')>
</a>
</div>
<div id="pageData">
<span id="info" ></span>
</div>
<div id="pagenext">
<a href="#" id="next" >
<source src="beep.mp3"></source>
</a>
</div>
</div>
</div>
</div>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我是这样搞的，
function playAudio(audio){ //IE8播放声音 if($.browser.msie && $.browser.version=='8.0'){ $('#audio-box').html('<embed src="'+audio+'"/>'); } else{ var html = ['<audio autoplay="autoplay"><source src="',audio,'" type="audio/mpeg"/></audio>'].join(''); $('#audio-box').html(html); } }