未知作用的有、如果也有像我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. 如何在云服务器上自动运行.py文件

    如果你在云服务器上运行的目的是保持一直运行,那就继续往下看吧. 有很多种方法,我这里说的是在linux上操作的一种. 利用screen会话分离. 因为在Screen环境下,所有的会话都独立的运行,并拥 ...

  2. 高性能mysql——高性能索引策略

    <高性能MySQL>读书笔记 一. 索引的优点 1. 索引可以让服务器快速定位到表的指定位置,大大减少了服务器需要扫描的数量: 2. 最常见的B-Tree索引按照顺序存储数据,可以用来做o ...

  3. python单元测试unittest、setUp、tearDown()

    单元测试反应的是一种以测试为驱动的开发模式,最大的好处就是保证一个程序模块的行为符合我们设计的测试用例,在将来修改的时候,可以极大程度保证该模块行为仍然是正确的. 下面我编写一个Dict来,这个类的行 ...

  4. HTTP认知（请求与响应）

    web的工作是:浏览器发送请求报文 + 服务端返回响应报文 通俗的说一下web工作的一个流程: 浏览器向服务端发送HTTP请求报文:这条请求报文组成由请求行.请求头.请求体三大部分组成: 1.请求行 ...

  5. Scrum Meeting - 第六周【Alpha阶段】

    每日任务内容: 本次会议为第六次Scrum Meeting会议 本次会议项目经理召开时间为20:00,在北区男生宿舍楼召开,召开时长约15分钟,探讨了本周选课网站编写的后续工作. 小组成员 本周任务 ...

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

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

  7. Appium(十)：元素定位(加强版)

    1. 元素定位 写完上一篇元素定位的博客,发现实用性基本为零.这几天真的烦死我了,一直在找资料,还去看了一遍appium官网文档.最后结合着selenium的定位方法,测试出几种可行的元素定位方法. ...

  8. Android Studio出现Failed to open zip file问题的解决方法

    直接在网上找到gradle-3.3-all.zip下载下来,不要解压缩,放在类似下面的目录中 C:\Users\Administrator\.gradle\wrapper\dists\gradle-3 ...

  9. JavaWeb学习——Servlet相关的接口和类

    JavaWeb学习——Servlet相关的接口和类 摘要:本文主要学习了Servlet相关的接口和类. Servlet的接口和类 三种方式 实现Servlet有三种方式: 实现javax.servle ...

  10. QGIS练手 - 标注

    又熬夜了... QGIS的标注就是标签,在QGIS3.x中有了改进. 不得不说,就光速度这一项,就能把ArcMap按在地上摩擦,更别说各种高级的标注样式了——除了标注功能面板UI有点“缺审美化”就是了 ...