带框拖拽
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1 {width: 100px; height: 100px; background-color: yellow; position: absolute;}
.box{border: 1px solid #000; position: absolute;}
</style>
</head>
<body>
<div id="div1"></div>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1')
oDiv.onmousedown = function(ev){
var oEvent = ev || event
var oBox = document.createElement('div') //创建一个div
oBox.style.width = oDiv.offsetWidth + 'px' //div的大小、位置和将要移动的元素一致
oBox.style.height = oDiv.offsetHeight + 'px'
oBox.style.left = oDiv.offsetLeft + 'px'
oBox.style.top = oDiv.offsetTop + 'px'
oBox.className = 'box'
document.body.appendChild(oBox) //将创建的 div 添加到页面上
pox = oEvent.clientX - oDiv.offsetLeft
poy = oEvent.clientY - oDiv.offsetTop
document.onmousemove = function(ev){
var oEvent = ev || event //实际上拖动的是创建的元素
oBox.style.left = oEvent.clientX - pox + 'px'
oBox.style.top = oEvent.clientY - poy + 'px'
}
document.onmouseup = function(){
oDiv.style.left = oBox.offsetLeft + 'px'
oDiv.style.top = oBox.offsetTop + 'px'
document.body.removeChild(oBox) //元素拖动到位置后，将创建的元素移除
document.onmousemove= null
document.onmouseup = null
}
return false; //解决浏览器默认事件的bug
}
}
</script>
</body>自定义滚动条
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1 {width: 20px; height: 20px; background-color: yellow; position: absolute;}
#parent{position: relative; width: 600px; height: 20px; background: #ccc; margin: 20px auto;}
</style>
</head>
<body>
<div id="parent">
<div id="div1"></div>
</div>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1')
var oParent = document.getElementById('parent')
oDiv.onmousedown = function(ev){
var oEvent = ev || event
pox = oEvent.clientX - oDiv.offsetLeft
document.onmousemove = function(ev){
var oEvent = ev || event
var l = oEvent.clientX - pox
if(l < 0){
l = 0
}else if(l > oParent.offsetWidth - oDiv.offsetWidth){
l = oParent.offsetWidth - oDiv.offsetWidth
}
//document.title = l / 580 移动距离/可移动长度
oDiv.style.left = l + 'px'
}
document.onmouseup = function(){
document.onmousemove= null
document.onmouseup = null
}
return false;
}
}
</script>
</body>实例1、用滚动条控制元素透明度、大小
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1 {width: 20px; height: 20px; background-color: yellow; position: absolute;}
#parent{position: relative; width: 600px; height: 20px; background: #ccc; margin: 20px auto;}
#div2{background: green;}
</style>
</head>
<body>
<div id="parent">
<div id="div1"></div>
</div>
<div id="div2"></div>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1')
var oDiv2 = document.getElementById('div2')
var oParent = document.getElementById('parent')
oDiv.onmousedown = function(ev){
var oEvent = ev || event
pox = oEvent.clientX - oDiv.offsetLeft
document.onmousemove = function(ev){
var oEvent = ev || event
var l = oEvent.clientX - pox
if(l < 0){
l = 0
}else if(l > oParent.offsetWidth - oDiv.offsetWidth){
l = oParent.offsetWidth - oDiv.offsetWidth
}
var scale = l / (oParent.offsetWidth - oDiv.offsetWidth) //移动距离 / 可移动总长度
document.title = scale
oDiv.style.left = l + 'px'
oDiv2.style.width = 400 * scale + 'px'
oDiv2.style.height = 400 * scale + 'px'
oDiv2.style.opacity = scale
}
document.onmouseup = function(){
document.onmousemove= null
document.onmouseup = null
}
return false;
}
}
</script>
</body>实例2、滚动条效果
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1 {width: 20px; height: 20px; background-color: yellow; position: absolute;}
#parent{position: relative; width: 600px; height: 20px; background: #ccc; margin: 20px auto;}
#div2{width: 400px; height: 300px; overflow: hidden; border: 1px solid #000; position: relative;}
#div3{position: absolute; left: 0; top: 0; padding: 10px 5px;}
</style>
</head>
<body>
<div id="parent">
<div id="div1"></div>
</div>
<div id="div2">
<div id="div3">
……
</div>
</div>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1')
var oDiv2 = document.getElementById('div2')
var oDiv3 = document.getElementById('div3')
var oParent = document.getElementById('parent')
oDiv.onmousedown = function(ev){
var oEvent = ev || event
pox = oEvent.clientX - oDiv.offsetLeft
document.onmousemove = function(ev){
var oEvent = ev || event
var l = oEvent.clientX - pox
if(l < 0){
l = 0
}else if(l > oParent.offsetWidth - oDiv.offsetWidth){
l = oParent.offsetWidth - oDiv.offsetWidth
}
console.log(oDiv3.offsetHeight, oDiv2.offsetHeight)
var scale = l / (oParent.offsetWidth - oDiv.offsetWidth) //移动距离 / 可移动总长度
document.title = scale
oDiv.style.left = l + 'px'
oDiv3.style.top = -(oDiv3.offsetHeight-oDiv2.offsetHeight) * scale + 'px'
}
document.onmouseup = function(){
document.onmousemove= null
document.onmouseup = null
}
return false;
}
}
</script>
</body>