Question

这是我当前和加载栏的代码：

whileloading: function() {
     $(".loadBar").css('width', ((this.bytesLoaded / this.bytesTotal) * 100) + '%');
},

whileplaying: function() {
     $(".progBar").css('width', ((this.position/this.duration) * 100) + '%');
},

当我点击当前时间栏时如何更改当前音频位置？

提前感谢您的帮助

Answer 1

这样的事情可以解决问题：

var that = this;
$("#ProgressAndLoadBarContainer").click(function(e){
    var $this = $(this);
    var relX = e.pageX - parseFloat($this.css("left"));
    var time = track_duration*(relX / $this.width());
    that.setPosition(time);
});

Answer 2

最简单的方法是使用offsetX属性。不幸的是，虽然这适用于Chrome，但它并不适用于Firefox（有关跨浏览器问题的一些背景信息，请参阅http://www.jacklmoore.com/notes/mouse-position/）。以下适用于我：

var pBar = document.createElement('progress');
$(pBar).click(function(evt) {
    var clickX = evt.offsetX;
    if(clickX == undefined){
        // welcome to Firefox
        var rect = evt.target.getBoundingClientRect();
        clickX = evt.clientX - rect.left;
    }
    var percent = clickX / evt.target.offsetWidth;
    console.log("pBar click at " + clickX+", "+percent+"%");
});

您还可以使用jQuery UI提供的滑块小部件。

可点击的歌曲进度条Soundmanager2

2 个答案: