当前位置:首页 > 网页特效 > 表格图层 >

jQuery 带渐变模块拖动

时间:2014-06-09 08:22 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • jQuery 带渐变模块拖动,拖动的时候会渐入渐出,拖动结束后效果随即结束,其实不用jquery也能实现哦,这里主要是想练习一下jQuery技术,高手勿笑哦。
  • <script type="text/javascript" language="javascript" src="/ajaxjs/jquery1.3.2.js"></script>
    <script type="text/javascript" language="javascript">
    var _move=false;//移动标记
    var _x,_y;//鼠标离控件左上角的相对位置
    $(document).ready(function(){
        $("#div2").click(function(){
            //alert("click");//点击(松开后触发)
            }).mousedown(function(e){
            _move=true;
            _x=e.pageX-parseInt($("#div2").css("left"));
            _y=e.pageY-parseInt($("#div2").css("top"));
            $("#div2").fadeTo(20, 0.25);//点击后开始拖动并透明显示
        });
        $(document).mousemove(function(e){
            if(_move){
                var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
                var y=e.pageY-_y;
                $("#div2").css({top:y,left:x});//控件新位置
            }
        }).mouseup(function(){
        _move=false;
        $("#div2").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
      });
    });
    </script>
由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-biaoge/8633.html

表格图层下载排行

最新文章