<!DOCTYPE html>

<html>

<title>简单拖曵原理实例</title>

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">

        $(function(){

            //样式

            $("#drag").css({"position":"absolute","top":"100px","left":"100px","border":"1px solid #789","width":"150px","height":"90px","background":"#988f82","cursor":"move"})

            /*+++++ 拖曳效果 ++++++

            *原理：标记拖曳状态dragging ,坐标位置iX, iY

            *         mousedown:fn(){dragging = true, 记录起始坐标位置，设置鼠标捕获}

            *         mouseover:fn(){判断如果dragging = true, 则当前坐标位置 - 记录起始坐标位置，绝对定位的元素获得差值}

            *         mouseup:fn(){dragging = false, 释放鼠标捕获，防止冒泡}

            */

            var dragging = false;

            var iX, iY;

            $("#drag").mousedown(function(e) {

                dragging = true;

                iX = e.clientX - this.offsetLeft;

                iY = e.clientY - this.offsetTop;

                this.setCapture && this.setCapture();

                return false;

            });

            document.onmousemove = function(e) {

                if (dragging) {

                var e = e || window.event;

                var oX = e.clientX - iX;

                var oY = e.clientY - iY;

                $("#drag").css({"left":oX + "px", "top":oY + "px"});

                return false;

                }

            };

            $(document).mouseup(function(e) {

                dragging = false;

                $("#drag")[0].releaseCapture();

                e.cancelBubble = true;

            })

        })

    </script>

</head>

<body>

    <div id="drag"></div>

</body>

</html>

简单的jquery拖曵原理js特效实例的更多相关文章

  1. Jquery拖拽原理

    /* onmousedown : 选择元素 onmousemove : 移动元素 onmouseup : 释放元素 */ 查看Demo:拖拽图片 function drag(obj) { obj.on ...

  2. JS鼠标的拖拽原理

    拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的.下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友! 一.拖拽的流程动作①鼠标按下②鼠标移动③鼠标松开 ...

  3. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

  4. javascript拖拽原理与简单实现方法[demo]

    美国人有一句常用的俗语—“Re-inventing the Wheel”,从字面上来解释就是“重新发明轮子”.可是轮子早已问世,再要去发明岂非劳而无功? 产品经理发下需求,实施者再到网上搜索代码,也许 ...

  5. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  7. 简单的jquery进度条插件LineProgressbar.js，myProgress.js

    参考   http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgress ...

  8. 150个JS特效脚本

    收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...

  9. jQuery懒加载插件jquery.lazyload.js使用说明实例

    jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...

随机推荐

  1. Web利器---fidder使用

    fiddler工具,主要看中其三点优势:1.功能强大,其他工具有的功能它也有,其他工具没有的功能它也有,支持http,https,ftp等协议:2.完全免费,长期免费.3.所有的浏览器可以使用,所有的 ...

  2. activity启动模式区别和优化

    初学android的开发人员,可能会经常忽略这个重要的设置. Activity一共有以下四种launchMode:1.standard2.singleTop3.singleTask4.singleIn ...

  3. node.js-session问题

    在使用express使用session时发现怎么使用session都是undefined最后发现 app.use(express.cookieParser()); app.use(express.se ...

  4. WebAPI的一种单元测试方案

    大家是如何对webApi写测试的呢? 1.利用Fiddler直接做请求,观察response的内容. 2.利用Httpclient做请求,断言response的内容. 3.直接调用webApi的act ...

  5. 解决Win7 软件图标不显示--Win7图标异常，快捷方式不显示解决方法

    电脑症状:WIN7的系统,桌面上的图标显示的不正常,快捷方式显示的是未知程序.看不到程序默认图标,快捷方式图标不显示. 解决方法:删除程序图标缓存即可.   将下面的内容复制到记事本保存为“Repai ...

  6. .NET轻量级MVC框架：Nancy入门教程(二)——Nancy和MVC的简单对比

    在上一篇的.NET轻量级MVC框架:Nancy入门教程(一)——初识Nancy中,简单介绍了Nancy,并写了一个Hello,world.看到大家的评论,都在问Nancy的优势在哪里?和微软的MVC比 ...

  7. 那些VisualStudio隐藏的调试功能

    VisualStudio是一个强大的调试工具,里面很多隐藏功能少有人问津,但是在特定场景可以节省你很多时间,本文主要介绍一些VisualStudio调试相关的隐藏功能,欢迎大家补充. 运行到指针(Ru ...

  8. SQL Server内存理解的误区

    SQL Server内存理解 内存的读写速度要远远大于磁盘,对于数据库而言,会充分利用内存的这种优势,将数据尽可能多地从磁盘缓存到内存中,从而使数据库可以直接从内存中读写数据,减少对机械磁盘的IO请求 ...

  9. TCP Server—Linux

    #include <stdio.h> #include <netinet/ip.h> #define BUFF_SIZE 1024 int main(int argc,char ...

  10. appserv中php升级问题

    当前版本为2.1,要升级到2.3.4 那么,首先到http://windows.php.net/downloads/releases/archives/ 找到2.3.4,需要注意的是,一般我们是非nt ...