鼠标事件-拖拽（滑块控制物体透明度变化）

最新推荐文章于 2021-12-14 21:24:56 发布

weixin_30547797

最新推荐文章于 2021-12-14 21:24:56 发布

阅读量172

点赞数

原文链接：http://www.cnblogs.com/youcandomore/p/6785232.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#parent{
width: 600px;
height: 20px;
border: 1px black solid;
position: relative;
margin: auto;
}
#child{
width: 20px;
height: 20px;
background: red;
position: absolute;
top: 0px;
left: 0px;
}
#div{
width: 200px;
height: 200px;
background: goldenrod;
filter:alpha(opacity:0);
opacity: 0.0;
}
</style>
<script>
window.onload = function(){
var parent = document.getElementById('parent');
var child = document.getElementById('child');
var mydiv = document.getElementById('div');

//x,y分别代表鼠标与移动物体的距离（在移动过程中，这个距离始终保持不变）
var x = 0;
var y = 0;

document.onmousedown = function(ev){
var oEvent = ev || event;

x = oEvent.clientX - child.offsetLeft;

document.onmousemove = function(ev){
var oEvent = ev || event;
//m.n分别代表移动物体的横纵坐标
var m = oEvent.clientX - x;
var scale = (child.offsetLeft)/(parent.offsetWidth - child.offsetWidth);

if(m < 0){
m = 0;
}else if(m > (parent.offsetWidth - child.offsetWidth)){
m = parent.offsetWidth - child.offsetWidth;
}
child.style.left = m + 'px';

mydiv.style.filter = 'alpha(opacity:'+scale*100+')';
mydiv.style.opacity = scale;

document.title = scale;
}

document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}

return false;
}

}
</script>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
<div id="div"></div>
</body>
</html>