JavaScript实战（原生range和自定义特效）

今天我又码了两个特效：一个是用原生input[type=range]的，另一个完全自定义的；下面是完整代码和演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #tip{
            position: absolute;
            top: 30px;
            left: 0;
            right: 0;
            width: 200px;
            height: 160px;
            margin: auto;
            border: 1px solid gray;
            background-color: cornsilk;
        }
        #tip div{
            position: relative;
            width: 100%;
            height: 80px;
            border-bottom: 1px solid gray;
        }
        .out{
            position: relative;
            left: 16%;
            display: inline-block;
            border: 2px solid royalblue;
            margin-top: 20px;
            width: 130px;
            height: 20px;
            background-color: lightgoldenrodyellow;
        }
        .in{
            display: block;
            height: 20px;
            line-height: 20px;
            text-align: right;
            color: white;
            width: 50%;
            background-image: linear-gradient(to right,powderblue 0%,#336699 50%,red 100%);
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        input[type="range"] {
            position: relative;
            left: 19%;
            top: 5px;
            box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;
            background-color: lightskyblue;
            border-radius: 15px;
            width: 60%;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            height:15px;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            height: 20px;
            width: 10px;
            background-color: coral;
            border-radius: 15px;
            -webkit-box-shadow: 0 -1px 1px black inset;
            -moz-box-shadow: 0 -1px 1px black inset;
            box-shadow: 0 -1px 1px black inset;
        }
        input[type="range"]:before{
            content: attr(value);
            color: white;
            border-radius: 5px 0 0 5px;
            background-color: lightskyblue;
        }
        input[type="range"]:after{
            content: attr(max);
            color: white;
            border-radius:0 5px 5px 0;
            background-color: lightskyblue;
        }
        .b{
            display: inline-block;
            width: 22px;
            padding: 0;
        }
        #outer2{left: 5px}
        #btn1{
            position: relative;
            left: 5px;
        }
        #btn2{
            position: relative;
            left: 5px;
        }
    </style>
<pre><code><script>
    window.onload = function(){
        //原生组件range
        var inner = document.getElementById('inner1');
        var range = document.getElementById('range');
        range.onclick = function(){
                inner.innerHTML = range.value;
                inner.style.width = range.value+'%';
        };
        range.onmousemove = function(){
                inner.innerHTML = range.value;
                inner.style.width = range.value+'%';
        };
        //自定义组件
        var outer2 = document.getElementById('outer2');
        var inner2 = document.getElementById('inner2');
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
        var id,id1;
        var value = parseInt(inner2.innerHTML);
        var a = parseFloat(window.getComputedStyle(outer2,null).width)/100;
        //减---
        btn1.onmousedown = function(){
            id1 = setTimeout(function change(){
                        if(value>0) {
                            value--;
                            inner2.innerHTML = value;
                            inner2.style.width = (value) * a + 'px';
                            id = setTimeout(function(){
                                clearTimeout(id);
                                change();
                            },16.7);
                        }else{clearTimeout(id);}
                    },500);
        };
        btn1.onmouseup = function(){clearTimeout(id1);clearTimeout(id)};
        btn1.onclick = function(){
            console.log('a:'+a+','+'value:'+value);
            if(value>0){
                value--;
                inner2.innerHTML = value;
                inner2.style.width = (value)*a+'px';
            }
        };
        //加+++
        btn2.onmousedown = function(){
            id1 = setTimeout(function change(){
                if(value<100) {
                    value++;
                    inner2.innerHTML = value;
                    inner2.style.width = value * a + 'px';
                    id = setTimeout(function(){
                        clearTimeout(id);
                        change();
                    },16.7);
                }else{clearTimeout(id);}
            },500);
        };
        btn2.onmouseup = function(){clearTimeout(id1);clearTimeout(id)};
        btn2.onclick = function(){
            if(value<100){
                value++;
                inner2.innerHTML = value;
                inner2.style.width = value*a+'px';
            }
        }
    }
</script>
</code></pre>
</head>
<body>
    <form id="tip">
        <div>
            <span id="outer1" class="out">
                <span id="inner1" class="in">50</span>
            </span>
            <input id="range" class="ran" type="range" min="0" max="100" step="1" value="50">
        </div>
        <div id="d2">
            <input id="btn1" class="b" type="button" value="<">
            <span id="outer2" class="out">
                <span id="inner2" class="in">50</span>
            </span>
            <input id="btn2" class="b" type="button" value=">">
        </div>
        按住按钮0.5秒, 会持续变化!
    </form>
</body>
</html>

第一个的实现很简单，就不做解释了，自己看代码；

这里主要介绍第二个实例的实现：

在我们看到一个需求，或者别人的特效时，不急着去看别人的代码，先想想，要是你，该怎么实现？先把思路整理出来

该特效的实现原理：

一个span内嵌套一个span；
- 外面的span：只显示宽、高、边框，背景无
- 里面的span：高度和外面一样，宽度为默认的50%，先设置好背景颜色为线性渐变
按钮的onclick事件比较简单，点一下，就改变里面的span的宽度和显示数字
当按钮的onmousedown时，启动计时器，等500ms后执行函数change函数，而change函数是一个用setTimeout回调自身的函数，他会没16.7ms回调一次，达到动画效果

难点解析：

这一句var a = parseFloat(window.getComputedStyle(outer2,null).width)/100;用来获得初始值，如果你用outer2.style.width是得不到值得，当然你也可以将a设个固定值，比如这里可以设为var a = 1.3，注意IE9以下不支持getComputedStyle方法，IE的Element对象有currentStyle属性；
这一句btn1.onmouseup = function(){clearTimeout(id1);clearTimeout(id)};很关键，没了它，在onclick触发之前，会先触发onmosedown，在500ms后，开始执行，之后一直执行外层的计时器；
其它的都不是难点；

这个实例其实扩展到其它很多应用，比如可以把中间的显示部分替换为文章、图片等等，再把按钮换成自定义的，效果将会很酷的！

如果您觉得我有写的不好的地方，欢迎指出！

posted on 2016-08-16 15:34 SuriFuture 阅读(1218) 评论(0) 编辑收藏举报

刷新页面返回顶部

JavaScript实战（原生range和自定义特效）

导航

公告