这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 js 实现兼容 PC 端和移动端滑块拖动选择数字的效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文为大家分享了 js 实现移动端滑块拖动选择数字的效果,可以通过鼠标拖拽滑动效果来选择数字,供大家参考,具体内容如下
- <!DOCTYPE html>
- <html lang="zh-cn">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
- <title>鼠标拖动小方块</title>
- <style type="text/CSS">
- .lineDiv {
- position: relative;
- height: 5px;
- background: red;
- width: 300px;
- margin: 50px auto;
- }
- .lineDiv .minDiv {
- position: absolute;
- top: -5px;
- left: 0;
- width: 15px;
- height: 15px;
- background: green;
- cursor: pointer
- }
- .lineDiv .minDiv .vals {
- position: absolute;
- font-size: 20px;
- top: -45px;
- left: -10px;
- width: 35px;
- height: 35px;
- line-height: 35px;
- text-align: center;
- background: blue;
- }
- .lineDiv .minDiv .vals:after {
- content: "";
- width: 0px;
- height: 0px;
- border-top: 6px solid blue;
- border-left: 6px solid transparent;
- border-right: 6px solid transparent;
- border-bottom: 6px solid transparent;
- display: block;
- margin-left: 11px;
- }
- </style>
- </head>
- <body>
- <center>
- <h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>
- </center>
- <div id="lineDiv" class="lineDiv">
- <div id="minDiv" class="minDiv">
- <div id="vals" class="vals">0</div>
- </div>
- </div>
- <script>
- window.onload = function() {
- var lineDiv = document.getElementById('lineDiv'); //长线条
- var minDiv = document.getElementById('minDiv'); //小方块
- var msg = document.getElementById("msg");
- var vals = document.getElementById("vals");
- var ifBool = false; //判断鼠标是否按下
- //事件
- var start = function(e) {
- e.stopPropagation();
- ifBool = true;
- console.log("鼠标按下")
- }
- var move = function(e) {
- console.log("鼠标拖动")
- if(ifBool) {
- if(!e.touches) { //兼容移动端
- var x = e.clientX;
- } else { //兼容PC端
- var x = e.touches[0].pageX;
- }
- //var x = e.touches[0].pageX || e.clientX; //鼠标横坐标var x
- var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标
- var minDiv_left = x - lineDiv_left; //小方块相对于父元素(长线条)的left值
- if(minDiv_left >= lineDiv.offsetWidth - 15) {
- minDiv_left = lineDiv.offsetWidth - 15;
- }
- if(minDiv_left < 0) {
- minDiv_left = 0;
- }
- //设置拖动后小方块的left值
- minDiv.style.left = minDiv_left + "px";
- msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
- vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
- }
- }
- var end = function(e) {
- console.log("鼠标弹起")
- ifBool = false;
- }
- //鼠标按下方块
- minDiv.addEventListener("touchstart", start);
- minDiv.addEventListener("mousedown", start);
- //拖动
- window.addEventListener("touchmove", move);
- window.addEventListener("mousemove", move);
- //鼠标松开
- window.addEventListener("touchend", end);
- window.addEventListener("mouseup", end);
- //获取元素的绝对位置
- function getPosition(node) {
- var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
- var top = node.offsetTop;
- current = node.offsetParent; // 取得元素的offsetParent
- // 一直循环直到根元素
- while(current != null) {
- left += current.offsetLeft;
- top += current.offsetTop;
- current = current.offsetParent;
- }
- return {
- "left": left,
- "top": top
- };
- }
- }
- </script>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0612/327568.html