未知作用的有、如果也有像我1样好奇的小伙伴了解了麻烦告知

 //    console.log(window.screen.availWidth);//未知效果

 //    console.log(window.screen.availHeight);//未知效果

 //

 //    console.log(window.screen.width);//未知效果

 //    console.log(window.screen.height);//未知效果

 //

 //    console.log(window.screen.bufferDepth);

 //    console.log(window.screen.colorDepth);

 //    console.log(window.screen.deviceXDPI);

 //    console.log(window.screen.deviceYDPI);

 //    console.log(window.screen.fontSmoothingEnabled);

 //    console.log(window.screen.logicalXDPI);

 //    console.log(window.screen.logicalyDPI);

 //    console.log(window.screen.pixelDepth);

 //    console.log(window.screen.updateInteral);

js高级程序设计 p214-215看到的,也没看懂

找到一张图炒鸡好、分享大家看看

另外看到的一些关于客户端的

 //    //客户端宽度固定、高度会因为内容而改变、不包括margin值

 //    console.log(document.body.clientWidth);//客户端可见宽度

 //    console.log(document.body.clientHeight);//客户端可见高度

 //

 //    //同clientWidth clientHeight 效果一样

 //    console.log(document.body.offsetWidth);

 //    console.log(document.body.offsetHeight);

 //

 //    console.log(document.body.scrollWidth);//会检测到媒体查询赋值的宽度

 //    console.log(document.body.scrollHeight);//获得效果跟clientHeight 和 offsetHeight一样

 //

 //    console.log(document.body.scrollTop);//未知效果

 //    console.log(document.body.scrollLeft);//未知效果

 //

 //    console.log(window.screenTop);//未知效果

 //    console.log(window.screenLeft);//未知效果

 //    console.log(document.documentElement.scrollTop);//获得滚动条往下滚动的高度

 //    console.log(document.documentElement.scrollLeft);//获得滚动条往左滚动的长度

     var obj = document.getElementById('div');

     //div上左

     var divTop =  obj.clientTop + obj.offsetTop + document.body.clientTop;

     console.log(obj.clientTop + '--' + obj.offsetTop + '--' + document.body.clientTop);

     console.log(divTop);

     var divLeft = obj.clientLeft + obj.offsetLeft + document.body.clientLeft;

     console.log(obj.clientLeft + '--' + obj.offsetLeft + '--' + document.body.clientLeft)

     console.log(divLeft);

写了一个简单的拖拽

     <style>

         body{

             position:relative;

             overflow: hidden;

             margin:0;padding:0;//不同客户端展现的不同

         }

         #testObj{

             position:absolute;

             top:0;

             left:0;

         }

     </style>

 <body>

 <div id="div" style="width:1290px;height:100px;background:silver"></div>

 <script type="text/javascript">

     var tObj = document.getElementById('testObj');

     tObj.onmousedown = function(e){

         var e = e || window.event;

             e.cancelBubble = true;//防止冒泡

 //        var pos = tObj.getBoundingClientRect();//跟offest 一个意思

 //        var mouseX = e.clientX - pos.left;

 //        var mouseY = e.clientY - pos.top;

         var posL = tObj.offsetLeft;

         var posT = tObj.offsetTop;

         var mouseX = e.clientX - posL;

         var mouseY = e.clientY - posT;

         document.onmousemove = function(e){

             var e = e || window.event;

             oLeft = e.clientX - mouseX;

             oTop = e.clientY - mouseY;

             tObj.style.top = oTop +'px';

             tObj.style.left = oLeft  +'px';

             //防止拖出去

             if (oLeft < 0){

                 tObj.style.left = 0 + "px";

             };

             if (oLeft > document.documentElement.clientWidth - tObj.offsetWidth - document.documentElement.clientLeft) {

                 tObj.style.left = document.documentElement.clientWidth - tObj.offsetWidth - document.documentElement.clientLeft + "px";

             }

             if (oTop<0) {

                 tObj.style.top = 0 + "px";

             };

             if (oTop > document.documentElement.clientHeight - tObj.offsetHeight) {

                 tObj.style.top = document.documentElement.clientHeight - tObj.offsetHeight + "px";

             }

         };

         this.onmouseup = function(e){

             document.onmousemove = null;

         }

     }

 </script>

[browser srceen]、很多未知望大神告知、简单写了个拖拽的更多相关文章

  1. 跟随大神实现简单的Vue框架

    自己用vue也不久了,学习之初就看过vue实现的原理,当时看也是迷迷糊糊,能说出来最基本的,但是感觉还是理解的不深入,最近找到了之前收藏的文章,跟着大神一步步敲了一下简易的实现,算是又加深了理解. 原 ...

  2. 老杜告诉你java小白到大神是怎么炼成的（转载）

    老杜告诉你java小白到大神是怎么炼成的 1. 学习前的准备 一个好的学习方法(应该怎么学习更高效): 一个合格的程序员应该具备两个能力 有一个很好的指法速度(敲代码快) 有一个很好的编程思想(编程思 ...

  3. 【web前端面试题整理04】阿里一行之大神面对面

    前言 这段时间我在河南一家公司当了一段时间的前端主管,最后可耻的匿了,原因各种各样,最主要的就是不想呆在郑州了. 其实这里的同事还是很不错的,面对老总最后的挽留我不是没有动心,而是这个地方确实不太好, ...

  4. 大神：python怎么爬取js的页面

    大神:python怎么爬取js的页面 可以试试抓包看看它请求了哪些东西, 很多时候可以绕过网页直接请求后面的API 实在不行就上 selenium (selenium大法好) selenium和pha ...

  5. 对话机器学习大神Yoshua Bengio（上）

    Yoshua Bengio教授(个人主页)是机器学习大神之一,尤其是在深度学习这个领域.他连同Geoff Hinton老先生以及 Yann LeCun(燕乐存)教授,缔造了2006年开始的深度学习复兴 ...

  6. 【同行说技术】iOS程序员从小白到大神必读资料汇总

    在文章<iOS程序员从小白到大神必读资料汇总(一)>里面介绍了很多iOS入门学习的资料,今天小编就发几篇技术进阶的文章,快来看看吧! 一.iOS后台模式开发指南 这个教程会教你在什么时候怎 ...

  7. ScrollView嵌套ListView的滑动冲突问题，是看大神的方法的，作为学习以后用的到

    在工作中,曾多次碰到ScrollView嵌套ListView的问题,网上的解决方法有很多种,但是杂而不全.我试过很多种方法,它们各有利弊. 在这里我将会从使用ScrollView嵌套ListView结 ...

  8. 兄台息怒，关于arguments，您的想法和大神是一样一样的----闲聊JS中的apply和call

    JavaScript提供了apply和call两种调用方式来确定函数体中this的指向,表现出来的特征就是:对象可以'借用'其他对象的方法.之前的几篇博客回顾了一些Web控件的一些开发方法,我们聊了如 ...

  9. PHP大神的十大优良习惯

    概述:通往PHP大神的道路上,应该保持优良的传统和习惯. 1.多阅读手册和源代码 没什么比阅读手册更值得强调的事了–仅仅通过阅读手册你就可以学习到很多东西,特别是很多有关于字符串和数组的函数.就在这些 ...

随机推荐

  1. jQuery实现电梯导航特效

    功能描述: 当滚动条滑到某个位置时,显示电梯导航: 当用户滚动滚动条时,让电梯导航的选中状态和当前滚动到的区域保持一致: 当用户点击电梯导航时,滚动条滚动到被点击导航对应的区域 准备工作: 首先将jQ ...

  2. 2019年Java面试题基础系列228道（3）

    51.类 ExampleA 继承 Exception,类 ExampleB 继承ExampleA. 有如下代码片断: try { throw new ExampleB("b")}c ...

  3. Linux 终端(TTY)

    TTY 是 Teletype 或 Teletypewriter 的缩写,原来是指电传打字机,后来这种设备逐渐键盘和显示器取代.不管是电传打字机还是键盘显示器,都是作为计算机的终端设备存在的,所以 TT ...

  4. Java DAO 模式

    转载自https://www.runoob.com/note/27029 DAO 模式 DAO (DataAccessobjects 数据存取对象)是指位于业务逻辑和持久化数据之间实现对持久化数据的访 ...

  5. pyhton的安装,环境变量的设置,pycharm的安装下载,中文汉化和字体的设置

    1.下载pycharm https://www.7down.com/soft/336988.html 1.pycharm的汉化下载汉化包:resources_cn.jar    放到pycharm的安 ...

  6. 如何在一台电脑上同时使用Gitee（码云）和Github？

    前言 最近重装了一下系统,用上了 win10,之前电脑上的开发环境和配置都被清除了,由于工作原因我需要经常使用 Gitee(码云)和 Github ,之前配置好了一个,但是不知道怎么同时配置两个,所以 ...

  7. Linux笔记16 使用Vsftpd服务传输文件;使用Samba或NFS实现文件共享。

    FTP协议有下面两种工作模式. 1.主动模式:FTP服务器主动向客户端发起连接请求. 2.被动模式:FTP服务器等待客户端发起连接请求(FTP的默认工作模式).Vsftpd服务程序vsftpd作为更加 ...

  8. 解读并加工BeautifulReport 报告模板

    使用unittest框架的脚本执行完成后,会生成一个html格式的报告 这个报告是提前制作了一个html的模板,然后将对应的内容写入到模板中,并生成一个最终的报告,这个报告模板在通过 pip inst ...

  9. [Linux]centos下安装memcached

    一.yum安装 1.Linux系统安装memcached,首先要先安装libevent库. yum install libevent libevent-devel 2.安装memcached yum ...

  10. hibernate opensission.createSQLquery 问题

    在进行分页查询的时候,通常会用到,页码,每页容量等等的参数进行操作,如下图: query.list()的时候会执行得到所需要的集合的值,在这个过程中, 如果使用自定义的返回参数,比如将日期做一些基本处 ...