javascript: mouseove mousedown事件

先看一张图：（也可以看 http://developer.apple.com/safaridemos/showcase/typography/#orange）

左边有滑动模块，是不是很酷呢，确实如此。经过分析APPLE的代码，明白了它是如何实现的

重点：

1.  外层div 的position 属性 relative ，内层 ,内层（滑动图标） 的 position:absolute ,这样图标的位置就是相对外层div了

2. 事件处理： click事件是鼠标点到滑动条上的，触触发位置改变 。 mousedown事件是mousemove事件的开始，mouseup是事件的结束

  $(document).ready(function (e) {
        $("#angleSlider").click(function (e) {
            $("#angleSlider .sliderThumb").get(0).style.left = (e.clientX - 17) + "px";

        });
        $("#angleSlider").mousedown(function (e) {
            $("#angleSlider").mousemove(function (e) {
                $("#angleSlider .sliderThumb").get(0).style.left = (e.clientX - 17) + "px";

            });

        });
        $("#angleSlider").mouseup(function (e) {
            $("#angleSlider").unbind("mousemove");

        });

经过以上的操作，就可以写自己的滑动条了

也可以用下面的代码，批处理添加左边四个滑动条的事件

 $(".horizontalSlider").click(function (e) {
            $(this).find(".sliderThumb").get(0).style.left = (e.clientX - 17) + "px";

        });