未知作用的有、如果也有像我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. 使用node+express+mongodb实现用户注册、登录和验证功能

    无论是手机端还是pc端,几乎都包含登录注册方面功能,今天就使用node+express+mongodb实现一套登录注册功能,这里需要自己去安装MongoDB环境,如果没有安装可以看这篇关于MongoD ...

  2. C#8.0中新特性之一：结构readonly成员

    结构struct成员支持readonly,用来限制被其修饰的成员不会改变结构的内部状态.加上7.2版本添加的readonly struct和ref readonly方法返回以及之前的字段声明修饰作用, ...

  3. 解决在IE11浏览器下,JQuery的AJAX方法不响应问题

    在项目的时候一直都是在使用谷歌浏览器在调试,后来在现场部署到服务器上的时候,客户使用的是IE浏览器,版本是11 在测试的过程中,出现几个问题,虽然是几个问题,但是问题的原因就是AJAX第一次响应,第二 ...

  4. Dynamics 365中使用计算字段自动编号字段实时工作流自动生成分组编码加流水号的自动编号字段值

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  5. 剑指offer-39：平衡二叉树

    题目描述 输入一棵二叉树,判断该二叉树是否是平衡二叉树. 解题思路 在做这题是,我第一反应就是遍历两次二叉树.第一遍记录每个节点的深度,并将信息存入HashMap中,key = node,value ...

  6. React Native-ios环境的搭建

    要在mac系统上搭建RN环境: 一.安装Homebrew.它是一款Mac OS平台下的软件包管理工具. 详见Homebrew的安装这篇文章. 二.安装node和watchman,用Homebrew在命 ...

  7. IT兄弟连 HTML5教程 CSS3属性特效 文字排版

    direction定义文字排列方式,所有浏览器都兼容这个属性,有两个可选值rtl和ltr.文字排版的参数说明如表1所示. 表1  CSS3文字排版参数说明 上表所示,ltr是初始值,表示left-to ...

  8. .NET Core 3.0之深入源码理解Host(一)

    写在前面 ASP .NET Core中的通用主机构建器是在v2.1中引入的,应用在启动时构建主机,主机作为一个对象用于封装应用资源以及应用程序启动和生存期管理.其主要功能包括配置初始化(包括加载配置以 ...

  9. 一个有意思的自我介绍PPT快闪

    模版来源:http://ppt.dede58.com/peixunyanjiang/27066.html

  10. CSRF漏洞原理浅谈

    CSRF漏洞原理浅谈 By : Mirror王宇阳 E-mail : mirrorwangyuyang@gmail.com 笔者并未深挖过CSRF,内容居多是参考<Web安全深度剖析>.& ...