未知作用的有、如果也有像我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. 在项目中在线使用Iconfont图标

    Iconfont真的很强大,图标数量惊人,基本任意的关键词都能搜索到你想要的结果.而且是国产的,网速会比较快,还可以改变图标颜色. 它提供svg.png.ai三种格式下载,之前我一直都是乖乖的一个个下 ...

  2. Jetpack架构组件（二）Lifecycle使用

    1.直接添加如下依赖就可以满足日常的工作,如果缺少哪个库,再去单独添加就好了 implementation "android.arch.lifecycle:extensions:1.1.1& ...

  3. 拥抱微服务，CODING 即将上线单项目多仓库功能

    随着数字化时代的全面到来,越来越多的企业开始尝试物联网.人工智能等新兴技术,用以加快自身的转型速度并积极开拓新的市场.互联网的兴起让各个行业的业务场景.用户行为.交互方式等都发生了巨大的变化.线上业务 ...

  4. styled-components：解决react的css无法作为组件私有样式的问题

    react中的css在一个文件中导入,是全局的,对其他组件标签都会有影响. 使用styled-components第三方模块来解决,并且styled-components还可以将标签和样式写到一起,作 ...

  5. Linux selinux 规则导致audit拒绝

    Linux selinux 规则导致audit拒绝 转载注明来源: 本文链接 来自osnosn的博客,写于 2019-09-26. 查看 audit2why -d audit2allow 这两个命令. ...

  6. java的各种日志框架

    本文是作者原创,版权归作者所有.若要转载,请注明出处.文章中若有错误和疏漏之处,还请各位大佬不吝指出,谢谢大家. java日志框架有很多,这篇文章我们来整理一下各大主流的日志框架, 包括log4j  ...

  7. Flask request和response

        Response # -*- coding: utf-8 -*-   from flask import Flask, redirect, render_template, jsonify,  ...

  8. SpringBoot 项目运行在 tomcat7 上

    SpringBoot 项目如何打成 war 包 SpringBoot项目的默认打包方式是将工程打包成为一个 jar 包.部分情况下,我们需要将项目打包成一个 war 包,以方便我们将工程部署在 tom ...

  9. 2.Ansible Playbook剧本

    1.playbook?playbook翻译过来就是"剧本",那playbook组成如下 play: 定义的是主机的角色 task: 定义的是具体执行的任务 playbook: 由一 ...

  10. 案例——UDP聊天

    UDP聊天案例   做一个网络编程相关的案例,想着用利用UDP的快速且不用连接的优点做一个聊天室,我们一个聊天程序需要可以接收消息,也要可以发送消息,所以我们的DatagramSocket对象不但需要 ...