87,997
社区成员
发帖
与我相关
我的任务
分享html下拉开关,如何制作
想做一个下拉的开关，就是鼠标拉下后产生事件的那种
现在有几个问题
1，我想让鼠标的滑轮也有效果，就是在固定区域滚动鼠标，按钮下拉。停止滚动 按钮自动回弹
2，我想鼠标的拖动只在按钮上产生效果，鼠标脱离按钮范围，按钮自动回弹，不再受到鼠标影响
3，指针脱了按钮范围不会选中内容
我自己弄出了一部分，但是上面的几个问题无法完整解决，求大神帮忙
下面是我自己弄的代码，估计比较烂，有大拿愿意做一个更好了
现在有几个问题
1，我想让鼠标的滑轮也有效果，就是在固定区域滚动鼠标，按钮下拉。停止滚动 按钮自动回弹
2，我想鼠标的拖动只在按钮上产生效果，鼠标脱离按钮范围，按钮自动回弹，不再受到鼠标影响
3，指针脱了按钮范围不会选中内容
我自己弄出了一部分，但是上面的几个问题无法完整解决，求大神帮忙
下面是我自己弄的代码，估计比较烂，有大拿愿意做一个更好了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
#box {
border: 1px solid blue;
width: 350px;
height: 300px;
}
#drag {
border: 1px solid blue;
width: 50px;
height: 50px;
position: absolute;
border-radius: 999px;
right: 125px;
top: 100px;
}
#sz {
border: 1px solid #000;
;
width: 1px;
height: 100px;
position: absolute;
border-radius: 999px;
top: -4px;
right: 150px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/jquery/jquery-mousewheel/master/jquery.mousewheel.min.js"></script>
<script>
window.onload = function() {
var x = 100;
var drag = document.getElementById('drag');
var inputX = document.getElementById('x');
var inputY = document.getElementById('y');
var box = document.getElementById("box");
if (box.addEventListener) {
// IE9, Chrome, Safari, Opera
box.addEventListener("onmousewheel", mousemove1, false);
$('#box').on('mousewheel', mousemove1);
} else {
// IE 6/7/8
box.attachEvent("onmousewheel", onmousemove);
$('#box').on('onmousewheel', onmousemove);
}
if (document.attachEvent) {
drag.attachEvent('onmousedown', dragHandle);
} else {
drag.addEventListener('mousedown', dragHandle, false);
} function test(event) {
x = 100;
$("#drag").animate({
top: "100px"
});
$("#sz").animate({
height: "100px"
});
}
function mousemove1(event) {
console.log("test");
console.log(event.deltaX, event.deltaY, event.deltaFactor);
if (event.deltaY < 0) {
x = x - event.deltaY - event.deltaY;
drag.style.top = x + "px";
sz.style.height = x + "px";
} else {
x = 100;
$("#drag").animate({
top: "100px"
});
$("#sz").animate({
height: "100px"
});
}
}
function onmousemove(event) {
drag.style.top = 0 + "px";
sz.style.height = 0 + "px";
} function dragHandle(event) {
var event = event || window.event;
var startX = drag.offsetLeft;
var startY = drag.offsetTop;
var mouseX = event.clientX;
var mouseY = event.clientY;
var deltaX = mouseX - startX;
var deltaY = mouseY - startY;
if (document.attachEvent) {
drag.attachEvent('onmousemove', moveHandle);
drag.attachEvent('onmouseup', upHandle);
drag.attachEvent('onlosecapture', upHandle);
drag.setCapture();
} else {
document.addEventListener('mousemove', moveHandle, true);
document.addEventListener('mouseup', upHandle, true);
} function moveHandle(event) {
var event = event || window.event;
drag.style.top = (event.clientY - deltaY) + "px";
sz.style.height = (event.clientY - deltaY) + "px";
} function upHandle() {
if (document.attachEvent) {
drag.detachEvent('onmousemove', moveHandle);
drag.detachEvent('onmouseup', upHandle);
drag.detachEvent('onlosecapture', upHandle);
drag.releaseCapture();
} else {
document.removeEventListener('mousemove', moveHandle, true);
document.removeEventListener('mouseup', upHandle, true);
x = 100;
$("#drag").animate({
top: "100px"
});
$("#sz").animate({
height: "100px"
});
if (drag.offsetTop > 200) {
if (black.style.display == "none") {
black.style.display = 'block';
} else {
black.style.display = 'none';
}
}
}
}
}
}
</script>
</head><body>
<div id="box"></div>
<div id="drag"></div>
<div id="sz"></div>
<div id="black" style="display: none;">233333333333333333333333</div>
</body></html>
...全文
