javascript - 如何实现一个元素点击一下长度增加一点，点击一下长度增加一点？

问题描述

问 题

如何实现一个元素点击一下长度增加一点，点击一下长度增加一点？

就相当于一个点击的滑块 点击加按钮 就增加 点击减按钮 就减少

解决方案

用两个元素嵌套实现，简单粗暴。CSS3用得溜，也可以用canvas画背景。

<div class="bar">
        <div class="bar-bg">

        </div>
    </div>
    <div class="button-wrap">
        <input type="button" name="" value="减少" class="reduce">
        <input type="button" name="" value="增加" class="add">
    </div>

    <style media="screen">
        .bar {
            width: 700px;
            height: 20px;
            border: 2px solid #CCCCCC;
            margin: 100px auto 0;
            border-radius: 10px;
            overflow: hidden;
        }

        .bar-bg {
            width: 70px;
            height: 100%;
            background-color: #dd4e4e;
        }

        .reduce,
        .add {
            -moz-appearance: none;
            -webkit-appearance: none;
            width: 70px;
            height: 30px;
            background-color: #EEEEEE;
            border: 1px solid #CCCCCC;
            margin: 0 40px;
        }

        .button-wrap {
            width: 315px;
            margin: 30px auto;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            $(".add").click(function() {
                $(".bar-bg").animate({
                    width: "+=70px"
                },"slow")
            })
            $(".reduce").click(function() {
                $(".bar-bg").animate({
                    width: "-=70px"
                },"slow")
            })
        })
    </script>

效果图

这篇关于javascript - 如何实现一个元素点击一下长度增加一点，点击一下长度增加一点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！