自定义播放器
默认的播放器在不同浏览器显示的不一样，所以需要自己写一个播放器以达成统一。
html部分
<div class="player-wrapper" ref="playerWrapper">
<video ref="video">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240" />
</object>
您的浏览器不支持视频标签。点击这里下载视频：<a
href="./MIU404_EP_01_ChineseSubbed.mp4"
>下载视频</a
>
</video>
<div class="control-content">
<div class="feedback" @click="feedback()">
<i class="fas fa-question-circle"></i>
<div class="feedbacktext">
<span>反馈</span>
</div>
</div>
<div class="play-btn">
<!-- <i class="fas fa-pause"></i> -->
<i class="fab fa-youtube"></i>
</div>
<div class="time-box">
<span>快进5秒</span>
</div>
<div class="sound-box">
<span>音量100%</span>
</div>
</div>
<div class="control-wrapper" ref="control">
<div class="control-top">
<div class="progress" ref="progress">
<div class="wrap" ref="wrap">
<div class="inner" ref="inner"></div>
</div>
<div class="wrap2" ref="wrap2"></div>
<div class="timetext" ref="timetext">
<span class="text" ref="text">00:00</span>
<i class="fas fa-caret-down"></i>
</div>
</div>
</div>
<div class="control-bottom">
<div class="left">
<div class="btns">
<span class="start fas fa-play" ref="play">
<!-- <i class="fas fa-play"></i> -->
<!-- <i class="fas fa-pause"></i> -->
</span>
<span class="next" @click="categoryStyle(ind + 1)">
<i class="fas fa-step-forward"></i>
</span>
</div>
<div class="time">
<span class="now" ref="nowTime">00:00</span
> / <span class="all" ref="allTime">00:00</span>
</div>
</div>
<div class="others">
<div class="sound">
<div class="switch" ref="soundSwitch">
<span
class="iconfont icon-24gf-volumeHigh"
ref="soundSwitchSpan"
>
</span>
<!-- <span class="iconfont icon-24gf-volumeDisable">静音</span> -->
<!-- <span class="iconfont icon-24gf-volumeLow">小音量</span> -->
<!-- <span class="iconfont icon-24gf-volumeMiddle">中音量</span> -->
</div>
<div class="sound-progress" ref="sound_progress">
<div class="wrap">
<div class="inner" ref="sound_inner"></div>
</div>
<div class="wrap2" ref="sound_wrap2"></div>
</div>
</div>
<div class="full-screen" ref="fullScreen">
<span class="fas fa-expand" ref="fullScreenSpan">
<!-- <i class="fas fa-expand"></i> -->
</span>
<!-- <span>
<i class="fas fa-compress"></i>
</span> -->
</div>
</div>
</div>
</div>css部分
.player-wrapper {
width: 880px;
height: 600px;
/* border: 1px solid black; */
background-color: rgb(15, 15, 15);
border-radius: 5px;
position: relative;
.control-content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
/* background-color: azure; */
z-index: 1;
.time-box {
width: 100px;
height: 50px;
background-color: rgb(112, 112, 112);
border-radius: 10px;
text-align: center;
color: #fff;
font-size: 20px;
line-height: 50px;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
}
.sound-box {
width: 100px;
height: 20px;
background-color: rgb(112, 112, 112);
border-radius: 10px;
text-align: center;
color: #fff;
font-size: 14px;
line-height: 20px;
position: absolute;
bottom: 55px;
left: 10px;
display: none;
}
.play-btn {
width: 80px;
height: 80px;
color: #fff;
text-align: center;
line-height: 80px;
background-color: rgb(112, 112, 112);
position: absolute;
right: 10px;
bottom: 55px;
border-radius: 50%;
font-size: 50px;
display: none;
}
.feedback {
position: absolute;
right: 10px;
top: 5px;
font-size: 25px;
color: #fff;
}
.feedback:hover {
cursor: pointer;
}
.feedback:hover .feedbacktext {
display: block;
}
.feedbacktext {
width: 40px;
height: 20px;
font-size: 14px;
border-radius: 5px;
text-align: center;
line-height: 20px;
color: #fff;
background-color: #999;
display: none;
position: absolute;
bottom: -20px;
left: -8px;
}
}
.control-wrapper {
/* height: 80px; */
// opacity: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
/* position: relative; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
position: absolute;
bottom: 0;
z-index: 2;
.control-top {
width: 100%;
padding: 0 10px;
box-sizing: border-box;
/* position: relative; */
margin-bottom: 5px;
.progress {
width: 100%;
height: 3px;
/* background-color: brown; */
/* margin: 0 230px 0 55px; */
position: relative;
.wrap {
position: absolute;
width: 100%;
height: 3px;
background-color: rgba(0, 0, 0, 0.1);
top: 0;
/* transform: translateY(-50%); */
.inner {
width: 9px;
height: 9px;
border-radius: 50%;
background-color: #fff;
border: 1px solid green;
margin-top: -3px;
position: absolute;
/* display: none; */
z-index: 1;
}
}
.wrap2 {
position: absolute;
height: 3px;
top: 0;
background-color: green;
width: 0px;
}
&:hover {
/* height: 4px; */
cursor: pointer;
}
}
.timetext {
width: 30px;
height: 30px;
/* background-color: yellow; */
text-align: center;
display: flex;
flex-direction: column;
justify-content: flex-start;
position: absolute;
color: #fff;
font-size: 12px;
left: -15px;
top: -33px;
display: none;
i {
color: #03a0d6;
}
}
&:hover .timetext {
display: block;
}
}
.control-bottom {
display: flex;
justify-content: space-between;
width: 100%;
height: 40px;
padding: 0 10px;
box-sizing: border-box;
.left {
display: flex;
align-items: center;
.time {
width: 100px;
line-height: 25px;
font-size: 14px;
color: #fff;
text-align: center;
span {
font-size: 14px;
color: #fff;
}
}
.btns {
width: 60px;
height: 40px;
/* line-height: 40px; */
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 10px;
span {
display: inline-block;
margin-left: 5px;
font-size: 20px;
color: #fff;
cursor: pointer;
}
}
}
.others {
width: 150px;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
.sound {
display: flex;
align-items: center;
.switch {
width: 20px;
margin-right: 5px;
span {
display: inline-block;
font-size: 20px;
color: #fff;
cursor: pointer;
}
}
.sound-progress {
width: 80px;
height: 25px;
position: relative;
.wrap {
position: absolute;
width: 100%;
height: 3px;
background-color: #727272;
top: 50%;
transform: translateY(-50%);
.inner {
width: 9px;
height: 9px;
border-radius: 50%;
background-color: #fff;
border: 1px solid green;
margin-top: -4px;
position: absolute;
cursor: pointer;
}
}
.wrap2 {
position: absolute;
height: 3px;
top: 50%;
transform: translateY(-50%);
background-color: green;
width: 0;
}
}
}
.full-screen {
width: 30px;
margin-left: 10px;
span {
display: inline-block;
margin-left: 5px;
font-size: 20px;
color: #fff;
cursor: pointer;
}
}
}
}js部分
function video() {
var playerWrapper = document.querySelector(".course-content>.player-wrapper");
var video = document.querySelector(".player-wrapper>video");
var control = document.querySelector(".player-wrapper>.control-wrapper");
var controlContent = document.querySelector(
".player-wrapper>.control-content"
);
var timeBox = document.querySelector(
".player-wrapper>.control-content>.time-box"
);
var timeBoxSpan = document.querySelector(
".player-wrapper>.control-content>.time-box>span"
);
var soundBox = document.querySelector(
".player-wrapper>.control-content>.sound-box"
);
var soundBoxSpan = document.querySelector(
".player-wrapper>.control-content>.sound-box>span"
);
var playBtn = document.querySelector(
".player-wrapper>.control-content>.play-btn"
);
var progress = document.querySelector(".progress");
var inner = document.querySelector(".progress>.wrap>.inner");
var wrap = document.querySelector(".progress>.wrap");
var wrap2 = document.querySelector(".progress>.wrap2");
var timetext = document.querySelector(".progress>.timetext");
var text = document.querySelector(".timetext>.text");
var sound_progress = document.querySelector(".others>.sound>.sound-progress");
var sound_inner = document.querySelector(
".others>.sound>.sound-progress>.wrap>.inner"
);
var sound_wrap2 = document.querySelector(
".others>.sound>.sound-progress>.wrap2"
);
var play = document.querySelector(".btns>.start");
var nowTime = document.querySelector(".time>.now");
var allTime = document.querySelector(".time>.all");
var soundSwitch = document.querySelector(".others>.sound>.switch");
var soundSwitchSpan = document.querySelector(".others>.sound>.switch>span");
var fullScreen = document.querySelector(".others>.full-screen");
var fullScreenSpan = document.querySelector(".others>.full-screen>span");
// 禁止鼠标右键事件
playerWrapper.oncontextmenu = function(){
return false;
}
video.width = playerWrapper.clientWidth;
video.height = playerWrapper.clientHeight;
// window.onresize = function() {
// if (document.documentElement.clientWidth >= 300) {
// video.width = window.screen.width;
// video.height = window.screen.height;
// }
// }
// console.log(progress.offsetLeft)
// 鼠标移入移出
// playerWrapper.onmousemove = function() {
// control.style.opacity = "1"
// }
// playerWrapper.onmouseout = function() {
// control.style.opacity = "0"
// }
// 视频的暂停播放功能
wrap2.style.width = 0 + "px";
if (video.paused) {
//暂停-->播放-->显示暂停按钮
removeClass(play, "fa-play");
addClass(play, "fa-pause");
playBtn.style.display = "none";
video.play();
timer = setInterval(move, 1);
} else {
//播放-->暂停-->显示播放按钮
removeClass(play, "fa-pause");
addClass(play, "fa-play");
playBtn.style.display = "block";
video.pause();
clearInterval(timer);
}
var timer = 0; //定义一个时间戳，用于定时器功能
var flag = 1; //同步音量
var isFullScreen = false; //全屏标志
var wrapperWidth = playerWrapper.clientWidth;
var wrapperHeight = playerWrapper.clientHeight;
var retime = 0;
function checkIsFullScreen() {
var isFullScreen =
document.fullscreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
return isFullScreen == undefined ? false : isFullScreen;
}
player();
document.addEventListener("fullscreenchange", () => {
if (checkIsFullScreen()) {
// console.log("进入全屏");
isFullScreen = true;
} else {
// console.log("退出全屏");
isFullScreen = false;
removeClass(fullScreenSpan, "fa-compress");
addClass(fullScreenSpan, "fa-expand");
video.width = wrapperWidth;
video.height = wrapperHeight;
}
});
document.onkeydown = function (event) {
event = event || window.event;
if (event.keyCode == 32) {
if (event.preventDefault) {
event.preventDefault();
} else {
window.event.returnValue = false;
}
if (video.paused) {
//暂停-->播放-->显示暂停按钮
removeClass(play, "fa-play");
addClass(play, "fa-pause");
playBtn.style.display = "none";
video.play();
timer = setInterval(move, 1);
} else {
//播放-->暂停-->显示播放按钮
removeClass(play, "fa-pause");
addClass(play, "fa-play");
playBtn.style.display = "block";
video.pause();
clearInterval(timer);
}
} else if (event.keyCode == 37) {
retime++;
video.currentTime -= 5;
move();
} else if (event.keyCode == 39) {
retime++;
video.currentTime += 5;
move();
} else if (event.keyCode == 38) {
if (isFullScreen) {
if (event.preventDefault) {
event.preventDefault();
} else {
window.event.returnValue = false;
}
if (video.volume >= 0 && video.volume <= 1) {
if (video.volume >= 0.9 && video.volume <= 1) {
video.volume = 1;
} else {
video.volume += 0.1;
}
}
}
} else if (event.keyCode == 40) {
if (isFullScreen) {
if (event.preventDefault) {
event.preventDefault();
} else {
window.event.returnValue = false;
}
if (video.volume >= 0 && video.volume <= 1) {
if (video.volume >= 0 && video.volume <= 0.1) {
video.volume = 0;
} else {
video.volume -= 0.1;
}
}
}
} else if (event.keyCode == 27) {
// removeClass(fullScreenSpan, "fa-compress");
// addClass(fullScreenSpan, "fa-expand");
// isFullScreen = false;
// if (document.exitFullscreen) {
// document.exitFullscreen();
// } else if (document.mozCancelFullScreen) {
// document.mozCancelFullScreen();
// } else if (document.webkitCancelFullScreen) {
// document.webkitCancelFullScreen();
// } else if (document.msExitFullscreen) {
// document.msExitFullscreen();
// }
// video.width = wrapperWidth;
// video.height = wrapperHeight;
}
// return false;
};
function move() {
inner.style.left = wrap2.style.width =
(video.currentTime / video.duration) * progress.clientWidth -
inner.offsetWidth / 2 +
"px";
nowTime.innerHTML = changeTime(video.currentTime);
}
document.onkeyup = function (event) {
event = event || window.event;
if (event.keyCode == 39) {
timeBox.style.display = "block";
timeBoxSpan.innerHTML = "快进" + retime * 5 + "秒";
setTimeout(function () {
timeBox.style.display = "none";
}, 500);
retime = 0;
} else if (event.keyCode == 37) {
timeBox.style.display = "block";
timeBoxSpan.innerHTML = "后退" + retime * 5 + "秒";
setTimeout(function () {
timeBox.style.display = "none";
}, 500);
retime = 0;
} else if (event.keyCode == 38) {
if (isFullScreen) {
if (event.preventDefault) {
event.preventDefault();
} else {
window.event.returnValue = false;
}
sound_inner.style.left = sound_wrap2.style.width =
(sound_progress.clientWidth - sound_inner.offsetWidth) *
video.volume +
"px";
soundBox.style.display = "block";
soundBoxSpan.innerHTML = "音量" + Math.round(video.volume * 100) + "%";
setTimeout(function () {
soundBox.style.display = "none";
}, 500);
}
} else if (event.keyCode == 40) {
if (isFullScreen) {
if (event.preventDefault) {
event.preventDefault();
} else {
window.event.returnValue = false;
}
sound_inner.style.left = sound_wrap2.style.width =
(sound_progress.clientWidth - sound_inner.offsetWidth) *
video.volume +
"px";
soundBox.style.display = "block";
soundBoxSpan.innerHTML = "音量" + Math.round(video.volume * 100) + "%";
setTimeout(function () {
soundBox.style.display = "none";
}, 500);
}
}
};
function player() {
controlContent.onclick = function () {
if (video.paused) {
//暂停-->播放-->显示暂停按钮
removeClass(play, "fa-play");
addClass(play, "fa-pause");
playBtn.style.display = "none";
video.play();
timer = setInterval(move, 1);
} else {
//播放-->暂停-->显示播放按钮
removeClass(play, "fa-pause");
addClass(play, "fa-play");
playBtn.style.display = "block";
video.pause();
clearInterval(timer);
}
};
// 播放按钮
play.onclick = function () {
if (video.paused) {
//暂停-->播放-->显示暂停按钮
removeClass(play, "fa-play");
addClass(play, "fa-pause");
playBtn.style.display = "none";
video.play();
timer = setInterval(move, 1);
} else {
//播放-->暂停-->显示播放按钮
removeClass(play, "fa-pause");
addClass(play, "fa-play");
playBtn.style.display = "block";
video.pause();
clearInterval(timer);
}
};
// 视频进度条功能
progress.onclick = function (event) {
event = event || window.event;
removeClass(play, "fa-play");
addClass(play, "fa-pause");
playBtn.style.display = "none";
video.play();
timer = setInterval(move, 100);
// 修改当前时间
video.currentTime =
video.duration *
((event.clientX - playerWrapper.offsetLeft - progress.offsetLeft) /
progress.clientWidth);
};
wrap.onmousemove = function (event) {
event = event || window.event;
var hoverLong =
event.clientX - playerWrapper.offsetLeft - progress.offsetLeft;
var hoverTime = video.duration * (hoverLong / progress.clientWidth);
if (hoverLong <= 0) {
hoverTime = 0;
} else if (hoverLong >= progress.clientWidth - 1) {
hoverTime = video.duration;
}
timetext.style.left =
(hoverTime / video.duration) * progress.clientWidth -
timetext.offsetWidth / 2 +
"px";
// console.log(timetext.style.left)
var left = parseInt(timetext.style.left);
// console.log(left)
if (left <= -15) {
timetext.style.left = -15 + "px";
} else if (left >= progress.clientWidth) {
timetext.style.left =
progress.clientWidth - timetext.offsetWidth / 2 + "px";
}
hoverTime = changeTime(hoverTime);
// console.log(hoverTime)
text.innerHTML = hoverTime;
// timetext.style.display = "block"
};
wrap2.onmousemove = function (event) {
event = event || window.event;
var hoverLong =
event.clientX - playerWrapper.offsetLeft - progress.offsetLeft;
var hoverTime = video.duration * (hoverLong / progress.clientWidth);
if (hoverLong <= 0) {
hoverTime = 0;
} else if (hoverLong >= progress.clientWidth - 1) {
hoverTime = video.duration;
}
timetext.style.left =
(hoverTime / video.duration) * progress.clientWidth -
timetext.offsetWidth / 2 +
"px";
// console.log(timetext.style.left)
var left = parseInt(timetext.style.left);
// console.log(left)
if (left <= -15) {
timetext.style.left = -15 + "px";
} else if (left >= progress.clientWidth) {
timetext.style.left =
progress.clientWidth - timetext.offsetWidth / 2 + "px";
}
hoverTime = changeTime(hoverTime);
// console.log(hoverTime)
text.innerHTML = hoverTime;
// timetext.style.display = "block"
};
function move() {
inner.style.left = wrap2.style.width =
(video.currentTime / video.duration) * progress.clientWidth -
inner.offsetWidth / 2 +
"px";
nowTime.innerHTML = changeTime(video.currentTime);
}
// 时间的显示
video.addEventListener("loadedmetadata", function () {
// console.log(video.duration);
allTime.innerHTML = changeTime(video.duration);
});
video.addEventListener("loadeddata", function () {
// console.log(video.duration);
allTime.innerHTML = changeTime(video.duration);
});
//音量按钮
sound_inner.style.left = sound_wrap2.style.width =
(sound_progress.clientWidth - sound_inner.offsetWidth) * video.volume +
"px";
soundSwitch.onclick = function () {
if (video.muted) {
//静音 ---> 不静音 ---> 没有/的那个
video.muted = false;
flag = flag == 0 ? 1 : flag;
video.volume = flag;
if (video.volume > 0 && video.volume <= 0.3) {
removeClass(soundSwitchSpan, "icon-24gf-volumeDisable");
removeClass(soundSwitchSpan, "icon-24gf-volumeMiddle");
removeClass(soundSwitchSpan, "icon-24gf-volumeHigh");
addClass(soundSwitchSpan, "icon-24gf-volumeLow");
video.muted = false;
} else if (video.volume > 0.3 && video.volume <= 0.6) {
removeClass(soundSwitchSpan, "icon-24gf-volumeDisable");
removeClass(soundSwitchSpan, "icon-24gf-volumeLow");
removeClass(soundSwitchSpan, "icon-24gf-volumeHigh");
addClass(soundSwitchSpan, "icon-24gf-volumeMiddle");
video.muted = false;
} else {
removeClass(soundSwitchSpan, "icon-24gf-volumeDisable");
removeClass(soundSwitchSpan, "icon-24gf-volumeLow");
removeClass(soundSwitchSpan, "icon-24gf-volumeMiddle");
addClass(soundSwitchSpan, "icon-24gf-volumeHigh");
video.muted = false;
}
sound_inner.style.left = sound_wrap2.style.width =
(sound_progress.clientWidth - sound_inner.offsetWidth) * flag + "px";
soundBox.style.display = "block";
soundBoxSpan.innerHTML = "音量" + Math.round(video.volume * 100) + "%";
setTimeout(function () {
soundBox.style.display = "none";
}, 500);
} else {
//不静音 ---> 静音 ---> 有/的那个
video.muted = true;
video.volume = 0;
removeClass(soundSwitchSpan, "icon-24gf-volumeLow");
removeClass(soundSwitchSpan, "icon-24gf-volumeMiddle");
removeClass(soundSwitchSpan, "icon-24gf-volumeHigh");
addClass(soundSwitchSpan, "icon-24gf-volumeDisable");
sound_inner.style.left = sound_wrap2.style.width = 0 + "px";
soundBox.style.display = "block";
soundBoxSpan.innerHTML = "音量" + Math.round(video.volume * 100) + "%";
setTimeout(function () {
soundBox.style.display = "none";
}, 500);
}
};
//全屏
fullScreen.onclick = function () {
if (isFullScreen) {
// 全屏 ---> 不是全屏
removeClass(fullScreenSpan, "fa-compress");
addClass(fullScreenSpan, "fa-expand");
isFullScreen = false;
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
video.width = wrapperWidth;
video.height = wrapperHeight;
} else {
removeClass(fullScreenSpan, "fa-expand");
addClass(fullScreenSpan, "fa-compress");
isFullScreen = true;
var docElm = playerWrapper;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
video.width = window.screen.width;
video.height = window.screen.height;
}
};
}
// 视频进度条
var callback = {
//回调机制
move: function () {
wrap2.style.width = this.offsetLeft + "px";
var scale = this.offsetLeft / (progress.clientWidth - inner.offsetWidth);
video.currentTime = video.duration * scale;
nowTime.innerHTML = changeTime(video.currentTime);
},
};
drag(inner, callback);
// 音量进度条
var callback2 = {
//回调机制
move: function () {
sound_wrap2.style.width = this.offsetLeft + "px";
var scale =
this.offsetLeft /
(sound_progress.clientWidth - sound_inner.offsetWidth);
flag = scale;
video.volume = scale;
if (video.volume == 0) {
video.muted = true;
removeClass(soundSwitchSpan, "icon-24gf-volumeLow");
removeClass(soundSwitchSpan, "icon-24gf-volumeMiddle");
removeClass(soundSwitchSpan, "icon-24gf-volumeHigh");
addClass(soundSwitchSpan, "icon-24gf-volumeDisable");
} else if (video.volume > 0 && video.volume <= 0.3) {
removeClass(soundSwitchSpan, "icon-24gf-volumeDisable");
removeClass(soundSwitchSpan, "icon-24gf-volumeMiddle");
removeClass(soundSwitchSpan, "icon-24gf-volumeHigh");
addClass(soundSwitchSpan, "icon-24gf-volumeLow");
video.muted = false;
} else if (video.volume > 0.3 && video.volume <= 0.6) {
removeClass(soundSwitchSpan, "icon-24gf-volumeDisable");
removeClass(soundSwitchSpan, "icon-24gf-volumeLow");
removeClass(soundSwitchSpan, "icon-24gf-volumeHigh");
addClass(soundSwitchSpan, "icon-24gf-volumeMiddle");
video.muted = false;
} else {
removeClass(soundSwitchSpan, "icon-24gf-volumeDisable");
removeClass(soundSwitchSpan, "icon-24gf-volumeLow");
removeClass(soundSwitchSpan, "icon-24gf-volumeMiddle");
addClass(soundSwitchSpan, "icon-24gf-volumeHigh");
video.muted = false;
}
soundBox.style.display = "block";
soundBoxSpan.innerHTML = "音量" + Math.round(video.volume * 100) + "%";
setTimeout(function () {
soundBox.style.display = "none";
}, 3000);
},
};
drag(sound_inner, callback2);
// 键盘事件 按下空格，视频暂停或播放 ，左右键视频快进，上下键音量控制
}
// 提取一个专门用来设置拖拽的函数
function drag(obj, callBack) {
//抽象元素一开始的位置
var startPoint = {
x: 0,
y: 0,
};
//抽象鼠标一开始的位置
var elementPoint = {
x: 0,
y: 0,
};
//元素绑定onmousedown事件
obj.onmousedown = function (event) {
// 当调用一个元素的setCaputure()方法后，这个元素将会把下一次所有的鼠标按下的相关事件捕获到自身上
//设置元素捕获所有鼠标按下事件
//setCaputure()只有IE支持，其他浏览器可能会报错
if (obj.setCaputure) {
obj.setCaputure();
}
event = event || window.event;
//元素偏移量 鼠标.clientX-元素.offsetLeft 鼠标.clientY-元素.offsetTop
// var ol = event.clientX - obj.offsetLeft;
elementPoint.x = obj.offsetLeft;
elementPoint.y = obj.offsetTop;
startPoint.x = event.clientX;
startPoint.y = event.clientY;
//document绑定onmousemove事件
document.onmousemove = function (event) {
event = event || window.event;
var nowPoint = {
x: 0,
y: 0,
};
nowPoint.x = event.clientX;
nowPoint.y = event.clientY;
var L = elementPoint.x + (nowPoint.x - startPoint.x);
//获取鼠标坐标
// var left = event.clientX - ol;
// var top = event.clientY;
if (L < 0) {
L = 0;
} else if (L > obj.parentNode.clientWidth - obj.offsetWidth) {
L = obj.parentNode.clientWidth - obj.offsetWidth;
}
//修改元素位置
obj.style.left = L + "px";
//调用回调函数
if (
callBack &&
callBack["move"] &&
typeof callBack["move"] === "function"
) {
callBack["move"].call(obj);
}
};
//document绑定onmouseup事件
document.onmouseup = function () {
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
//鼠标松开，取消捕获事件
if (obj.releaseCapture) {
obj.releaseCapture();
}
};
// 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能异常，这个是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false来取消默认行为 但对ie8不起作用
return false;
};
}
//工具类
function addClass(node, className) {
var reg = new RegExp("\\b" + className + "\\b");
if (!reg.test(node.className)) {
node.className += " " + className;
}
}
function removeClass(node, className) {
if (node.className) {
var reg = new RegExp("\\b" + className + "\\b");
var classes = node.className;
node.className = classes.replace(reg, "");
if (/^\s*$/g.test(node.className)) {
node.removeAttribute("class");
}
} else {
node.removeAttribute("class");
}
}
function changeTime(time) {
time = parseInt(time);
var m = toZero(Math.floor(time / 60));
var s = toZero(Math.round(time % 60));
return m + ":" + s;
}
// 补0
function toZero(num) {
var val = "";
if (num < 10) {
val = "0" + num;
} else {
val = val + num;
}
return val;
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
