0
点赞
收藏
分享

微信扫一扫

原生JS拖拽进度条改变元素透明度


今天要分享的是运用原生JS拖拽进度条改变元素透明度,效果如下:

原生JS拖拽进度条改变元素透明度_ci

以下是代码实现,欢迎大家复制粘贴。

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS拖拽进度条改变元素透明度</title>
<style>
#slider {
width: 400px;
height: 20px;
background: #CCC;
position: relative;
margin: 20px auto;
}

#block {
width: 20px;
height: 20px;
background: red;
cursor: pointer;
position: absolute;
}

#box {
width: 300px;
height: 300px;
margin: 0 auto;
filter: alpha(opacity:0);
opacity: 0;
background: yellow;
}
</style>
</head>

<body>
<div id="slider">
<div id="block"></div>
</div>

<div id="box"></div>

<script>

window.onload = function () {

var slider = document.getElementById('slider');
var block = document.getElementById('block');
var box = document.getElementById('box');

block.onmousedown = function (ev) {

var myEvent = ev || event;

// 计算鼠标相对滑块上的位置
var disX = myEvent.clientX - block.offsetLeft;

document.onmousemove = function (ev) {

var myEvent = ev || event;

// 计算滑块的动态left值
var l = myEvent.clientX - disX;

// 限制拖拽范围
if (l < 0) {

l = 0;

} else if (l > slider.offsetWidth - block.offsetWidth) {

l = slider.offsetWidth - block.offsetWidth;
}

block.style.left = l + 'px';

// 计算拖拽移动距离与可拖动总范围的比例
var scale = l / (slider.offsetWidth - block.offsetWidth);

// 让Box跟随鼠标的拖动逐渐显示与隐藏
box.style.filter = 'alpha(opacity:' + 100 * scale + ')';
box.style.opacity = scale;

};

document.onmouseup = function () {

document.onmousemove = null;
document.onmouseup = null;
};
};
};
</script>
</body>

</html>

举报

相关推荐

0 条评论