js完成拖动滑块与点击水波纹效果

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

本篇文章就给大家介绍js实现拖动滑块效果和点击水波纹效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

拖动滑块效果：

先看看效果图：

js实现拖动滑块和点击水波纹效果

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Document</title>
        <script type="text/javascript" src=""></script>

        <style type="text/css">
            input[type="range"] {
                width: 80%;
                background-color: red;
                border-radius: 15px;
                -webkit-appearance: none;
                height: 1px;
                position: relative;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                background-color: green;
                border-radius: 50%;
                height: 30px;
                width: 30px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
                border: none;
                position: relative;
                z-index: 10;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $(".input_1").change(function() {
                    $("p.p1").text($(this).val());
                })

                setInterval(function() {
                    $("p.p2").text($(".input_2").val());
                }, 0.01)
            })
        </script>
    </head>

    <body>
        <p>添加change事件</p>
        <input type="range" step="0.01" min="0" max="5" value="0">
        <p>0</p>
        <p>添加定时器</p>
        <input type="range" step="0.01" min="0" max="5" value="0">
        <p>0</p>
    </body>

</html>

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <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"> <div id="minDiv"> <div id="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; //判断鼠标是否按下 //鼠标按下方块 minDiv.addEventListener("touchstart", function(e) { e.stopPropagation(); ifBool = true; console.log("鼠标按下") }); //拖动 window.addEventListener("touchmove", function(e) { console.log("鼠标拖动") if(ifBool) { var x = e.touches[0].pageX

关键词：js完成拖动滑块与点击水波纹效果