[browser srceen]、很多未知望大神告知、简单写了个拖拽
未知作用的有、如果也有像我1样好奇的小伙伴了解了麻烦告知
1 // console.log(window.screen.availWidth);//未知效果 2 // console.log(window.screen.availHeight);//未知效果 3 // 4 // console.log(window.screen.width);//未知效果 5 // console.log(window.screen.height);//未知效果 6 // 7 // console.log(window.screen.bufferDepth); 8 // console.log(window.screen.colorDepth); 9 // console.log(window.screen.deviceXDPI); 10 // console.log(window.screen.deviceYDPI); 11 // console.log(window.screen.fontSmoothingEnabled); 12 // console.log(window.screen.logicalXDPI); 13 // console.log(window.screen.logicalyDPI); 14 // console.log(window.screen.pixelDepth); 15 // console.log(window.screen.updateInteral);
js高级程序设计 p214-215看到的,也没看懂
找到一张图炒鸡好、分享大家看看
另外看到的一些关于客户端的
1 // //客户端宽度固定、高度会因为内容而改变、不包括margin值 2 // console.log(document.body.clientWidth);//客户端可见宽度 3 // console.log(document.body.clientHeight);//客户端可见高度 4 // 5 // //同clientWidth clientHeight 效果一样 6 // console.log(document.body.offsetWidth); 7 // console.log(document.body.offsetHeight); 8 // 9 // console.log(document.body.scrollWidth);//会检测到媒体查询赋值的宽度 10 // console.log(document.body.scrollHeight);//获得效果跟clientHeight 和 offsetHeight一样 11 // 12 // console.log(document.body.scrollTop);//未知效果 13 // console.log(document.body.scrollLeft);//未知效果 14 // 15 // console.log(window.screenTop);//未知效果 16 // console.log(window.screenLeft);//未知效果 17 18 // console.log(document.documentElement.scrollTop);//获得滚动条往下滚动的高度 19 // console.log(document.documentElement.scrollLeft);//获得滚动条往左滚动的长度 20 21 var obj = document.getElementById('div'); 22 23 //div上左 24 var divTop = obj.clientTop + obj.offsetTop + document.body.clientTop; 25 console.log(obj.clientTop + '--' + obj.offsetTop + '--' + document.body.clientTop); 26 console.log(divTop); 27 28 var divLeft = obj.clientLeft + obj.offsetLeft + document.body.clientLeft; 29 console.log(obj.clientLeft + '--' + obj.offsetLeft + '--' + document.body.clientLeft) 30 console.log(divLeft);
写了一个简单的拖拽
1 <style> 2 body{ 3 position:relative; 4 overflow: hidden; 5 margin:0;padding:0;//不同客户端展现的不同 6 } 7 #testObj{ 8 position:absolute; 9 top:0; 10 left:0; 11 } 12 </style> 13 14 <body> 15 <div id="div" style="width:1290px;height:100px;background:silver"></div> 16 <script type="text/javascript"> 17 var tObj = document.getElementById('testObj'); 18 tObj.onmousedown = function(e){ 19 var e = e || window.event; 20 e.cancelBubble = true;//防止冒泡 21 // var pos = tObj.getBoundingClientRect();//跟offest 一个意思 22 // var mouseX = e.clientX - pos.left; 23 // var mouseY = e.clientY - pos.top; 24 25 var posL = tObj.offsetLeft; 26 var posT = tObj.offsetTop; 27 var mouseX = e.clientX - posL; 28 var mouseY = e.clientY - posT; 29 document.onmousemove = function(e){ 30 var e = e || window.event; 31 oLeft = e.clientX - mouseX; 32 oTop = e.clientY - mouseY; 33 tObj.style.top = oTop +'px'; 34 tObj.style.left = oLeft +'px'; 35 36 //防止拖出去 37 if (oLeft < 0){ 38 tObj.style.left = 0 + "px"; 39 }; 40 if (oLeft > document.documentElement.clientWidth - tObj.offsetWidth - document.documentElement.clientLeft) { 41 tObj.style.left = document.documentElement.clientWidth - tObj.offsetWidth - document.documentElement.clientLeft + "px"; 42 } 43 if (oTop<0) { 44 tObj.style.top = 0 + "px"; 45 }; 46 if (oTop > document.documentElement.clientHeight - tObj.offsetHeight) { 47 tObj.style.top = document.documentElement.clientHeight - tObj.offsetHeight + "px"; 48 } 49 }; 50 this.onmouseup = function(e){ 51 document.onmousemove = null; 52 } 53 } 54 </script>
