036-Web前端-JS-样例：滚动条

最新推荐文章于 2022-08-29 15:56:56 发布

我的肚肚有点儿疼

最新推荐文章于 2022-08-29 15:56:56 发布

阅读量149

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/Fenfen_vyron/article/details/106841199

版权

Web前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

#6.18
本节为鼠标事件的样例——提示文字滚动条
具体理论相关标注在代码中

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>带有提示文字的滚动条</title>
    <style>
        div {
            width: 25px;
            height: 25px;
            border: 1px solid black;
            line-height: 25px;
            text-align: center;
            position: absolute; /*接受坐标后绝对定位*/
            display: none;
        }
    </style>
</head>
<body>
<input type="range" min="0" max="100" value="5"/>  <!--范围-->
<div></div>
<script>
    var input = document.querySelector('input');
    var div = document.querySelector('div');
    var flag = false;   //检测是否鼠标按下的变量
    input.onmousemove = function () {
        if (flag) {
            // console.log('(x,y):('+event.clientX+','+event.clientY+')');
            var left = event.clientX;   //上节讲过的event
            if (left > 135) {   //防止溢出边界还有值
                left = 135;
            }
            if (left < 14) {    //防止溢出边界还有值
                left = 14;
            }
            div.style.left = left + 'px';
            //div.style.left只能接受字符串，所以+'px'统一变成字符串
            div.innerHTML = input.value;    //h5中的input.value的值
            div.style.display = 'block';    //鼠标按下的时候才显示
        }
    }
    input.onmousedown = function () {   //鼠标按下
        flag = true;
        //console.log('(x,y):('+event.clientX+','+event.clientY+')');
    }
    input.onmouseup = function () {     //鼠标放开
        flag = false;
        div.style.display = 'none';     //鼠标放开后div自动隐藏
    }
</script>
</body>
</html>

我的肚肚有点儿疼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
036-Web前端-JS-样例：滚动条

#6.18本节为鼠标事件的样例——提示文字滚动条具体理论相关标注在代码中<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>带有提示文字的滚动条</title> <style> div { width: 25px; height: 25px;
复制链接

扫一扫