未知作用的有、如果也有像我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. Office安装时报错1907的解决方法

    大家在装office时可能遇到过1907错误,字体无法注册 的问题,百度后者是采用什么四种方法,我四种方法都试过了没有用,也有人说缺什么日本字体,我也试过了没有用,做为有强迫证的我都重做系统,重下载o ...

  2. sql server的简单分页

    --显示前条数据 select top(4) * from students; --pageSize:每页显示的条数 --pageNow:当前页 )) sno from students); --带条 ...

  3. 避免 C# TreeView NodeMouseDoubleClick 双击事件的节点错位的错误行为

    避免 C# TreeView NodeMouseDoubleClick 双击事件的节点错位的错误行为 在使用WinForm标准的TreeView控件的过程中,添加了如下类似的节点 parentNode ...

  4. HUE备份已定义好的workflow

    HUE备份已定义好的workflow 最近使用HUE定义了一个很复杂的调度,但是调度执行到一半就开始报错....  这个可真让人头疼呀, 从头开始跑数据吧 太费时间了,而且会容易造成Hive库总数据冗 ...

  5. WebRTC Android版本编译

    本文简单介绍如何在Ubuntu18.04 上,编译WebRTC Android版本. 安装工具 需要用到depot_tools工具来下载webrtc源码. 安装 depot_tools git 命令获 ...

  6. 理解MVVM在react、vue中的使用

    理解MVVM在react.vue中的使用 一:什么是MVC.为什么不用MVC 1:MVC的含义: M(modal):是应用程序中处理数据逻辑的部分. V (view)  :是应用程序中数据显示的部分. ...

  7. flex招式心法

    flex布局绝对是我们平常在布局中用的最多的一个属性,我们来看看它在can i use中的浏览器支持度:(截止到2019/11/16) 挖藕,凹森!支持度居然这么好,好到连ie也能支持大部分的flex ...

  8. English: Class Speed

    Xx_Introduce https://www.jianshu.com/p/d1c1b84d89e8 Please protection,respect,love,"China's Int ...

  9. 微信小程序——表单验证插件WxValidate的二次封装（终极版）

    微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, ...

  10. katalon Studio之WebUi自动化测试视频教程持续更新

    通知...通知...通知... 为了更好的把katalon Studio自动化测试工具推广给大家,最近在B站中开通了视频专栏,地址如下: https://www.bilibili.com/video/ ...