如何实现一个元素点击一下长度增加一点，点击一下长度增加一点？
就相当于一个点击的滑块 点击加按钮 就增加 点击减按钮 就减少
解决方案
用两个元素嵌套实现，简单粗暴。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>效果图