本文demo下載:http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=1065
實例通過jQuery技術在html網頁中實現一個音樂播放器, 播放器能夠播放在線音樂, 實現了暫停,開始,拖動進度等功能,雙擊播放器界面還可以變成 Mini模式, 趕緊來看看吧
視頻觀看地址:http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=1065
實例講解】
1. 實例運行起來的效果見下圖的 實例效果
2. 為了讓音樂播放器能夠自動拖拽, 在滑塊演示 中實現了這樣的小功能
3. 播放器演示中,點擊 播放圖片,音樂播放,再點擊,音樂停止, 拖動到指定位置,音樂從相應的位置開始播放
4. 雙擊黑色區域,音樂播放器切換成Mini模式,再雙擊,從Mini模式切回正常模式
【實例效果】
【實例代碼】
head > < body > < div class = "ss-player" > < div class = "ss-box" > < div class = "pbcell" > < div class = "btn-ctrl" > div >
div > < div class = "pbcell" > < div class = "progressbar" > < div class = "currenttime" >< i class = "btn-drag" > i > div > < div class = "buffertime" > div >
div >
div > < div class = "pbcell" > < span class = "timelabel" >00:00/00:00 span >
div > div > < audio id = "player" src = "http://jq22.qiniudn.com/the.mp3" controls = "" > audio >
div > < p style = "border:1px solid #B3E4FF;background-color: aliceblue;padding: 20px;" > 有時間做了一個播放器,做的過程中,要做拖動和滑塊兩個小功能,所以順便一起演示給大家看。希望能幫到要學的人。
p > < h1 >1、滑塊演示 h1 > 拖動我試試 : < div class = "ZZZ" style = "width:400px;height: 20px; background-color:#F1F1F1;margin:50px 0;display: inline-block;vertical-align: middle;" > < div class = "AAA" style = "width: 0%;height: 100%;background-color:#44C2FF; text-align: center; " >< span class = "BBB" > span > div >
div > < h1 >2、播放器演示 h1 > < p >浮動著呢,左下角哈。雙擊播放器會切成Mini模式啊 p > < script > $(function() { function formatTime(seconds) { var min = Math.floor(seconds / 60), second = seconds % 60, hour, newMin, time; min = parseInt(min); second = parseInt(second); if (min > 60) { hour = Math.floor(min / 60); newMin = min % 60; } if (second < 10) { second = '0' + second; } if (min < 10) { min = '0' + min; } return time = hour ? (hour + ':' + newMin + ':' + second) : (min + ':' + second); } $('body').on('dragstart', '.ss-player', function() { return false; }); function ssplayer() { var ssplayer = $('#player')[0]; ssplayer.ontimeupdate = function() { //console.log(ssplayer.currentTime+'/'+ssplayer.duration); var duration = ssplayer.duration; var currentTime = ssplayer.currentTime; var p = currentTime / duration * 100; var dlen = formatTime(duration); var clen = formatTime(currentTime); var bfp = ssplayer.buffered.end(0) / duration * 100; //console.log(dlen+'/'+clen); $('.ss-player .timelabel').html(clen + '/' + dlen); $('.ss-player .currenttime').stop(false, true).css({ width: p + '%' }); $('.ss-player .buffertime').stop(false, true).css({ width: bfp + '%' }); } ssplayer.onended = function() { $('.ss-player .btn-ctrl').removeClass('pause'); } ssplayer.onprogress = function() { } return $('#player')[0]; } $('body').on('dblclick', '.ss-player', function() { $(this).toggleClass('mini'); }); var player = ssplayer(); $('body').on('click', '.ss-player .btn-ctrl', function(e) { if (player.paused) { player.play(); $('.ss-player .btn-ctrl').removeClass('pause').addClass('pause'); } else { player.pause(); $('.ss-player .btn-ctrl').removeClass('pause'); } e.stopPropagation(); }); //拖動 $.fn.extend({ initDrag: function(options) { var defaults = { range: false, //可拖動範圍元素對象 sx: true, //是否可橫向拖動 sy: true, //是否可縱向拖動 slider: false, //是否為滑塊模式,是則為對象 sliding: function() {}, //滑動滑塊時的回調函數 bans: false //禁用哪些內部對象拖動 } var opts = $.extend(defaults, options); var _this = $(this); _this.isDragStart = false; //是否拖動模式 _this.dragStartX = null; //起始座標X _this.dragStartY = null; //起始座標Y _this.mousedown(function(e) { _this.isDragStart = true; //標記為手動模式 _this.dragStartX = e.pageX - _this.offset().left; //對象起始位置相對座標X _this.dragStartY = e.pageY - _this.offset().top; //對象起始位置相對座標Y if ($(document).setCapture) { $(document).setCapture(); } //滑塊模式(當點擊範圍滑動和點擊處) if (opts.slider !== false) { var x = e.pageX - opts.slider.offset().left; var y = e.pageY - opts.slider.offset().top; var ww = opts.range.width(); var hh = opts.range.height(); if (x > ww) { x = ww; } if (y > hh) { y = hh; } if (opts.sx) { opts.slider.css('width', x + 'px'); opts.sliding(x / ww); } if (opts.sy) { opts.slider.css('height', y + 'px'); opts.sliding(y / hh); } } e.stopPropagation(); }); //禁用哪些內部元素拖動 if (opts.bans !== false) { opts.bans.each(function() { $(this).mousedown(function(e) { e.stopPropagation(); }); }); } //拖動時 $(document).mousemove(function(e) { if (!_this.isDragStart) { return false; } if (opts.slider !== false) { x = e.pageX - opts.slider.offset().left; y = e.pageY - opts.slider.offset().top; } else { var x = e.pageX - _this.dragStartX - _this.css('margin-left').replace('px', ''); var y = e.pageY - _this.dragStartY - _this.css('margin-top').replace('px', ''); } //是否啟用拖動範圍 if (opts.range !== false) { var ww = opts.range.width(); var hh = opts.range.height(); var zw = _this.outerWidth(true); var zh = _this.outerHeight(true); if (x < 0) { x = 0; } if (y < 0) { y = 0; } if (opts.slider !== false) { if (x > ww) { x = ww; } if (y > hh) { y = hh; } } else { if (x > ww - zw) { x = ww - zw; } if (y > hh - zh) { y = hh - zh; } } } //是否滑塊模式,拖動模式 if (opts.slider !== false) { if (opts.sx) { opts.slider.css('width', x + 'px'); opts.sliding(x / ww); } if (opts.sy) { opts.slider.css('height', y + 'px'); opts.sliding(y / hh); } } else { if (opts.sx) { _this.css('left', x + 'px').css('right', 'auto'); } if (opts.sy) { _this.css('top', y + 'px').css('bottom', 'auto'); } } }); $(document).mouseup(function() { if ($(this).releaseCapture) { $(this).releaseCapture(); } _this.isDragStart = false; }); } }); $('.ss-player .btn-drag,.ss-player .progressbar').initDrag({ slider: $('.ss-player .currenttime'), sy: false, range: $('.ss-player .progressbar'), sliding: function(p) { var s = p * player.duration; player.currentTime = s; } }); $('.ss-player').initDrag({ range: $('body'), bans: $('.ss-player .progressbar,.ss-player .btn-ctrl') }); $('.ZZZ').initDrag({ slider: $('.AAA'), sy: false, range: $('.ZZZ'), sliding: function(p) { $('.BBB').html(Math.round(p * 100) + '%'); } }); });
script >
body >
html > |
閱讀更多 代碼專家 的文章