<!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. Redis主从复制深入剖析

    Redis是一个开源的,遵守BSD许可协议的key/value缓存系统,并由其高效的响应速度以及丰富的数据结构而闻名.Redis在京东的使用也是非常普遍的,包括很多关键业务上的 使用,由于Redis官 ...

  2. java 中 finally里面写了return 会发生什么？

    boolean test() throws Exception { boolean ret = true; try { int b = 12; int c; for (int i = 1; i > ...

  3. 使用vim在Linux下编写C语言程序

    1.进入字符界面 2.创建文件夹用于存放源文件 mkdir helloworld    //创建文件夹命令 cd helloworld        //进入新建的文件夹,这里应该说目录比较好,win ...

  4. 初识selenium--百度实例录制

    Selenium 是一个web的自动化测试工具,不少学习功能自动化的朋友首选的就是Selenium,它相比QTP有许多优点(QTP笔者由于种种原因暂未使用过O(∩_∩)O哈!): ①Selenium是 ...

  5. java反射机制初探

    最近和一位师兄交流了一下Java,真可谓是大有收获,让我好好的学习了一下javad的反射机制,同终于明白了spring等框架的一个基本实现的思想,那么今天就和大家分享一下java的反射机制. 反射,r ...

  6. 给 admin 新建的 hdfs 文件的权限

    su hdfs hdfs dfs -chown -R admin /   org.apache.hadoop.security.AccessControlException: Permission d ...

  7. Sensor（LIGHT）

    package com.example.sensor01; import java.util.List; import android.hardware.Sensor; import android. ...

  8. 作业2源程序版本管理软件优缺点，及Github注册

    目前流行的源程序管理软件和项目管理软件主要有以下一些: 1.Visual Source Safe 优点:如果开发工具是VS.NET,用VSS较合适,方便,安装配置和使用都简单,版本控制简单,打labe ...

  9. iOS——Core Animation 知识摘抄（一）

    本文是对http://www.cocoachina.com/ios/20150104/10814.html文章的关键段落的摘抄,有需要的看原文 CALayer和UIView的关系: CALayer类在 ...

  10. atitit。ocr框架类库大全 attilax总结

    atitit.ocr框架类库大全 attilax总结 Tesseract Asprise JavaOCR 闲来无事,发现百度有一个OCR文字识别接口,感觉挺有意思的,拿来研究一下. 百度服务简介:文字 ...