您的位置：首页 > Web前端 > JavaScript

原生javascript滑块滑动demo

2017-03-20 22:59 218 查看 
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="telephone=yes" name="format-detection" />
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="x5-fullscreen" content="true">
<meta name="apple-touch-fullscreen" content="yes">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}

body {
padding-top: 100px;
}

button {
height: 40px;
width: 120px;
font-size: 15px;
}

.box {
width: 600px;
height: 300px;
margin: 50px auto;
overflow: hidden;
}

.box ul {
position: relative;
height: 120px;
width: 20000px;
margin: 50px auto;
padding: 0;
margin: 0;
}

.box ul li {
width: 150px;
height: 100px;
float: left;
list-style: none;
}

#slider {
position: relative;
height: 20px;
width: 60px;
background: orange;
border-radius: 10px;
cursor: pointer;
}
</style>

</head>

<body>
<div class="box">
<ul class="movebox">
<li style="background:red;">1</li>
<li style="background:yellow;">2</li>
<li style="background:blue;">3</li>
<li style="background:green;">4</li>
<li style="background:pink;">5</li>
<li style="background:lightcoral;">6</li>
<li style="background:blue;">3</li>
<li style="background:green;">4</li>
<li style="background:red;">1</li>
<li style="background:lightcoral;">6</li>
</ul>
<div class="sliderbox">
<div id="slider" style="left:0;"></div>
</div>
</div>
</body>
<script>
var slider = document.querySelector("#slider"); //滑块
var moveBox = document.querySelector(".movebox");
var sliderBox = document.querySelector(".sliderbox"); //滑块box
var startX, endX, oLeft = 0; //初始化值

//鼠标按下是事件
slider.onmousedown = function(e) {
slider.style.left = oLeft + "px"; //每次按下后设置最后的left
e = event || window.event;
startX = e.pageX;
sliderBox.addEventListener("mousemove", move, false); //鼠标按下绑定事件
}

//鼠标上弹的事件
slider.onmouseup = function(e) {
oLeft = parseInt(slider.style.left); //鼠标送开始计算最后的left
e = event || window.event;
endX = e.pageX;
sliderBox.removeEventListener("mousemove", move, false); //鼠标松开取消事件绑定
}

//鼠标移动时的事件
function move(e) {
e = event || window.event;
var sLeft = parseInt(slider.style.left);
//判断滑块滑动的范围
if (sLeft >= 0 && sLeft <= 540) {
var moveX = e.pageX;
slider.style.left = (oLeft + (moveX - startX)) + "px"; //滑块滑动的距离
moveBox.style.left = "-" + (oLeft + (moveX - startX)) + "px"; //box移动的距离
}
}
</script>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航