我正在尝试制作一个页面，该页面使用 html5 音频在后台循环播放声音文件，并在用户向下滚动时淡出。理想情况下，当用户向上滚动时，它也会淡入。我知道我还很遥远，但这是我正在处理的事情：
html:
<html lang="en-US">
<head>
<style>article {height:1000px; background:yellow;}</style>
</head>
<body>
<article>
<audio loop id="soundTour" src="longdong.wav"></audio>
</article>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
</body>
</html>
jQuery:
$(document).ready(function() {
var audioElm = $('#soundTour').get(0);
audioElm.play();
audioElm.volume=1;
$(window).scroll(function () {
//audioElm.volume=.1;
var value = $(window).scroll("value");
audioElm.volume = (value / 100);
});
});
http://jsfiddle.net/8X6Wn/
有人想尝试一下吗？谢谢！！！
您可以使用.scrollTop()确定用户滚动了多远：
$(document).ready(function() {
var audioElm = $('#soundTour').get(0);
audioElm.play();
var height = $(document).height() - $(window).height();
$(window).scroll(function() {
audioElm.volume = 1 - $(window).scrollTop() / height;
console.log(audioElm.volume);
});
});
Demo: http://jsfiddle.net/8X6Wn/3/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
