jquery写的一个说表拖拽层的效果——不多说直接上代码-优快云博客

本文介绍了一种使用HTML、CSS和JavaScript实现网页滑块的简单方法，通过jQuery简化了事件处理过程，使得用户能够轻松地在指定范围内移动滑块并实时更新其位置。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        #Container
        {
            width:800px;
            height:500px;
            position:relative;
            border:1px solid #CCC;
        }
        #Slider
        {
            width:50px;
            height:50px;
            border:1px solid #CCC;
            background-color:Gray;
            position:absolute;
            left:0;
            top:50px;
            cursor:pointer;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script type="text/javascript">
        var isMove = false;
        var mouseDownPosi;
        var InitPosition;
        $(document).ready(function () {
            $("#Slider").mousedown(function (e) {
                isMove = true;
                mouseDownPosi = e.pageX;
                InitPosition = $(this).css("left").replace("px", "");
            })
            $(document).mousemove(function (e) {
                if (isMove) {
                    var temp = parseInt(e.pageX) - parseInt(mouseDownPosi) + parseInt(InitPosition);
                    $("#Slider").css("left", temp + "px");
                }
            })
            $(document).mouseup(function () {
                isMove = false;
            })
        })
    </script>
</head>
<body>
    <div id="Container">
        <div id="Slider"></div>
    </div>
</body>
</html>