参考：慕课网DOM实践探秘 http://www.imooc.com/learn/138

实现需求：点击页面头部，可以拖动面板。使用js原生和jquery 各实现一次。

可以学到：1、鼠标在当前页面的位置。

　　　　　2、事件处理程序，阻止冒泡，

　　　　　3、面板位置的逻辑计算。

　　　　　4、鼠标事件：onmousedown (鼠标点下)  onmouseup  (鼠标释放) onmousemove (鼠标移动)

课前须知：html css javascript jquery

实例：

JS / jquery 实现页面 面板拖动 QQ网页版登陆页面拖动的更多相关文章

  1. HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版

    昨天看到这篇文章[置顶]开源组件NanUI一周年 - 使用HTML/CSS/JS来构建.Net Winform应用程序界面 就想弄一个winform结合html5的一个小东西,突有兴致,想在里面嵌套一 ...

  2. jQuery实践-别踩白块儿网页版

    ▓▓▓▓▓▓ 大致介绍 终于结束了考试,放假回家了.这次的别踩白块儿网页版要比之前做的 jQuery实践-网页版2048小游戏 要简单一点,基本的思路都差不多. 预览:别踩白块网页版 这篇博客并不是详 ...

  3. 16-网页,网站,微信公众号基础入门(网页版MQTT,页面控件位置调整入门)

    https://www.cnblogs.com/yangfengwu/p/11200767.html 说一下,只要你java学的很好,那么几乎所有的语言都不在话下了 来看一下样式设置 运行 在左上角感 ...

  4. Wordpress在主题中自定义登陆页面并且禁用自带的登陆页面

    在使用Wordpress制作主题之后,不想要他自带的登陆页面以及地址. 1.新建一个用户页面来接管与登陆相关的动作 //在主题根目录下新建page-login.php,通过action获取用户动作,然 ...

  5. SpringBootSecurity学习（02）网页版登陆配置类代替默认配置

    增加Security配置类 前面演示了一个简单的登录入门例子,使用springboot-security默认的配置实现,虽然非常简单,但是基本实现了登录功能.不过在生产环境下,显然不能仅仅使用如此简单 ...

  6. [Backbone.js]如何用backbone写一个仿网页版微信的webapp?

    var Chat = Backbone.Model.extend({ idAttribute:'id', initialize:function(options){ var users = this. ...

  7. 微信网页版APP - 网页微信客户端电脑版体验

    微信网页版很早就出来了,解决了很多人上班不能玩手机的问题.微信电脑版-网页微信客户端,直接安装在桌面的微信网页版,免去了开浏览器的麻烦.双击就启动了,和其他的应用程序一样:运行过程中可以隐藏在桌面右下 ...

  8. session过期跳转到登陆页面并跳出iframe框架的两个方法

    最近在做拦截器,判断用户登录后操作超时,失去权限然后要重新登录,但是用的iframe,返回的登陆页总是在框架中显示,我百度了下,总是只有其中一个方法,现在分享下两种解决方法,希望对你们有帮助: 方法一 ...

  9. JavaWeb-SpringSecurity自定义登陆页面

    系列博文 项目已上传至guthub 传送门 JavaWeb-SpringSecurity初认识 传送门 JavaWeb-SpringSecurity在数据库中查询登陆用户 传送门 JavaWeb-Sp ...

随机推荐

  1. 有用的Java注解

    好处: 能够读懂别人的代码,特别是框架相关的代码: 让编程更加简洁,代码更加清晰. 使用自定义注解解决问题!! Java1.5版本引入. Java中的常见注解 @Override:告诉使用者及编译器, ...

  2. [BZOJ4920][Lydsy六月月赛]薄饼切割

    [BZOJ4920][Lydsy六月月赛]薄饼切割 试题描述 有一天,tangjz 送给了 quailty 一张薄饼,tangjz 将它放在了水平桌面上,从上面看下去,薄饼形成了一个 \(H \tim ...

  3. 【COGS 1873】 [国家集训队2011]happiness(吴确) 最小割

    这是一种最小割模型,就是对称三角,中间双向边,我们必须满足其最小割就是满足题目条件的互斥关系的最小舍弃,在这道题里面我们S表示文T表示理,中间一排点是每个人,每个人向两边连其选文或者选理的价值,中间每 ...

  4. 如何解析Json返回的数据

    Json在Web开发的用处非常广泛,作为数据传递的载体,如何解析Json返回的数据是非常常用的.下面介绍下四种解析Json的方式: Part 1 var list1 = [1,3,4]; alert( ...

  5. codeforces 110E Lucky Tree

    传送门:https://codeforces.com/contest/110/problem/E 题意:给你一颗树,节点与节点之间的边有一个边权,定义只由4和7组成的数字是幸运数字,现在要你求一共有多 ...

  6. Ecplise下设置jQuery和ExtJs自动提示

    Spket 1.6.23下载: http://yunpan.cn/cjJYmEcMFIuuN  访问密码 5642 ext jsb下载:http://yunpan.cn/cjJYR7ZTzibQn  ...

  7. PHP 扒一扒这些题目都考了哪些知识点

    1.模除 题目: <?php echo -10%3; *结果* -1 分析:其实这道题的知识点是在考模除和正负号的关系,那么我们看一段进阶的代码 <?php echo "10%3 ...

  8. vue入门知识

    vue的特点在于:响应的数据绑定.组合的视图组件. vue的文件,分成三个部分<template>html模板</template>  <script>js< ...

  9. nginx的常规配置

    程序员们,在北上广你还能买房吗? >>>   nginx的常规配置 nginx的使用非常简单,只需要配置好我们需要的各种指令,就能跑起来.如果你需要添加模块,还需要添加模块方面的配 ...

  10. [bzoj3931][CQOI2015]网络吞吐量——最短路+网络流

    题目 传送门 题解 第一次一遍就AC一道bzoj上的题,虽然是一道水题... 我们做一边最短路,求出每个点的dist,然后再做一次类似spfa的操作,求出每个点是否可以用于建图. 在新图上拆点跑一边d ...