<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="jquery-1.7.2.min.js"></script>

    <title></title>

    <style>

        * {

            margin:0px;

            padding:0px;

        }

        .a {

            position:fixed;

            width:%;

            height:%;

            background-color:red;

        }

        .aa {

            height: 100px;

            width: 200px;

            position: absolute;

            background-color: green;

        }

    </style>

</head>

<body>

    <div class="a">

    <div class="aa"></div>

        </div>

    <div style="position:absolute;z-index:1;"><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></div>

</body>

</html>

<script>

    $(".aa").mousedown(function (e) {

        //设置移动后的默认位置

        var endx = ;

        var endy = ;

        //获取div的初始位置，要注意的是需要转整型，因为获取到值带px

        var left = parseInt($(".aa").css("left"));

        var top = parseInt($(".aa").css("top"));

        //获取鼠标按下时的坐标，区别于下面的es.pageX,es.pageY

        var downx = e.pageX;

        var downy = e.pageY;   //pageY的y要大写，必须大写！！

        //  鼠标按下时给div挂事件

        $(".a").mousemove("mousemove", function (es) {

            //es.pageX,es.pageY:获取鼠标移动后的坐标

            var endx = es.pageX - downx + left;   //计算div的最终位置

            var endy = es.pageY - downy + top;

            //带上单位

            $(".aa").css("left", endx + "px").css("top", endy + "px")

        });

    })

    $(".aa").mouseup(function () {

    //    鼠标弹起时给div取消事件

        $(".aa").unbind("mousemove");

        $(".a").unbind("mousemove")

    })

    //$(".aa").mousedown(function (e) {

    //    $(document).bind("mousemove", function (e) {

    //        $(".aa").css("left", e.pageX).css("top", e.pageY)

    //    });

    //})

    //$(".aa").mouseup(function () {

    //    $(document).unbind("mousemove")

    //})

</script>

jQuery div鼠标移动效果的更多相关文章

  1. jQuery实现鼠标经过图片变亮效果

    在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  2. jQuery实现的Div窗口震动效果实例

    本文实例讲述了jQuery实现的Div窗口震动效果.分享给大家供大家参考.具体如下: 这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8.360.Fi ...

  3. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  4. DIV的摇晃效果---jquery实现

    DIV的摇晃效果---jquery实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. jQuery实现鼠标移到元素上动态提示消息框效果

    当光标移动到某些元素上时,会弹出像tips的提示框,这种效果想必大家都有见到过吧,下面有个不错的示例,大家可以感受下 当光标移动到某些元素上时,会弹出像tips的提示框. 复制代码代码如下: < ...

  6. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  7. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  8. jQuery实现模拟滚动条效果；

    滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果: 滚动条的实现原理其实比较简单,拿垂直滚动条来说: 1),最外层容器需要设置overflow:hid ...

  9. 【前端】用jQuery实现瀑布流效果

    jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...

随机推荐

  1. c++使用http协议上传文件到七牛云服务器

    使用c++ http协议上传文件到七牛服务器时,比较搞的一点就是header的设置: "Content-Type:multipart/form-data;boundary=xxx" ...

  2. The Pragmatic Programmer 摘要评注

    这本书与其说是一本编程书,倒不如说是一本教做人的书.很多时候项目的进行依赖于技术以外的因素,比如说沟通,人的品格,人际,处理问题的方法.在未来的一度日子会陆续添加个人认为值得学习的内容.

  3. python笔记-4（装饰器、生成器、迭代器）

    一.熟练掌握装饰器的原理 (在装饰器学习的过程中,查了看了很多资料,个人感觉走了很多的弯路,这个笔记,分享我的理解,希望能帮助到一些人.本文对装饰器的描述,侧重点是条理与逻辑思路,想通过从无到有的方式 ...

  4. QtAV的编译方法

    1--编译准备 QtAV的安装编译总指导说明:https://github.com/wang-bin/QtAV/wiki/Build-QtAV QtAV的源代码:https://github.com/ ...

  5. Ctrl+H 浪潮Raid配置文档

    说明 本手册适用于LSI芯片Raid卡 包括但不限于Inspur 2008/2108 Raid卡.LSI 9240/9260/9261/9271 等Raid卡. 不同型号的Raid卡在某些功能上的支持 ...

  6. MATLAB01

    在命令行窗口输入edit就会进入代码编写区,编写完毕点击运行后会先进行保存,然后再执行代码,保存时候一定要以英文开头. 数组 创建矩阵: 函数名 描述 zero(m,n) 创建m行n列全零矩阵 one ...

  7. 求分数1+1/2+1/3+.....+1/n的值

    总结:自己理解错了的有以下几点: 1.s初始化的值是0.但数据类型最好定位double双精度类型 2.for循环里面的i<n.不要忘了等号,因为i作为分母,不能为0,所以从1开始, 3.在mai ...

  8. java代码求分数等级的输出~~~

    总结:无论是switch-case-break语句 都不要忘了跳出当前循环,即break; 还有这个输入的分数我如何控制在100以内???? package com.c2; //实现分数等级的输出. ...

  9. Oracle日常性能问题查看

    1 判断回滚段竞争的sql --当Ratio大于2时存在回滚段竞争,需要增加更多的回滚段) ratio from v$rollstat rs, v$rollname rn where rs.USN = ...

  10. Py修行路 python基础 （二十一）logging日志模块 json序列化 正则表达式（re）

    一.日志模块 两种配置方式:1.config函数 2.logger #1.config函数 不能输出到屏幕 #2.logger对象 (获取别人的信息,需要两个数据流:文件流和屏幕流需要将数据从两个数据 ...