实例介绍
【实例简介】
基于jQuery简单的音乐播放器、滑块
【实例截图】
【核心代码】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基于jQuery简单的音乐播放器、滑块-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<style>
html {
height:100%;
}
body {
height:100%;
}
#player {
display:none;
}
.ss-player {
position:fixed;
left:0;
bottom:0;
margin:10px;
color:#FFF;
}
.ss-player.mini .ss-box {
width:100px;
height:100px;
border-radius:50%;
}
.ss-player.mini .pbcell:nth-child(2),.ss-player.mini .pbcell:nth-child(3) {
display:none;
}
.ss-box {
width:500px;
height:100px;
background-color:#000;
overflow:hidden;
display:table;
transition:0.5s;
}
.ss-player .btn-ctrl {
width:40px;
height:40px;
margin:10px;
cursor:pointer;
display:inline-block;
background-image:url(http://jq22.qiniudn.com/1gvzgu.svg);
background-size:100% 100%;
background-position:center center;
transition:0.5s;
}
.ss-player .btn-ctrl.pause {
background-image:url(http://jq22.qiniudn.com/44mnya.svg);
}
.ss-player .timelabel {
color:#FFF;
font-size:14px;
}
.ss-player .progressbar {
width:300px;
height:4px;
margin:auto;
display:inline-block;
border-radius:2px;
background-color:rgba(255,255,255,0.2);
position:relative;
}
.ss-player .currenttime {
width:0%;
height:100%;
background-color:#e60012;
border-radius:2px;
position:absolute;
text-align:right;
left:0;
top:0;
}
.ss-player .buffertime {
width:0%;
height:100%;
background-color:rgba(180,180,180,0.5);
border-radius:2px;
}
.ss-player .currenttime .btn-drag {
width:6px;
height:6px;
border-radius:50%;
background-color:#e60012;
border:2px solid #FFF;
display:inline-block;
position:absolute;
right:0px;
margin-right:-4px;
top:-2px;
cursor:pointer;
transition:0.3s;
}
.ss-player .currenttime .btn-drag:hover {
box-shadow:0 0 10px 0 rgba(255,255,255,1);
}
.ss-player .pbcell {
display:table-cell;
vertical-align:middle;
text-align:center;
}
.pbcell:nth-child(3) {
padding:0 10px;
}
</style>
</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>
标签： 控件
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论