Javascript实例教程:网页中移动拖拽的JS属性

文章简介:做移动、拖动时常用的js属性.

1.clientHeight, clientWidth:
这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入
元素中的页边距,边框等.

2.clientLeft,clientTop:
这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0.

3.scrollLeft,scrollTop:
如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
对于不可以滚动的元素,这些值总是0.

4.scrollHeight,scrollWidth:
不管有多少对象在页面上可见,他们得到的是整体.Top



<SCRIPT LANGUAGE="JavaScript">
var s = "";
s += "\r\n网页可见区域宽:"+ document.body.clientWidth;
s += "\r\n网页可见区域高:"+ document.body.clientHeight;
s += "\r\n网页可见区域高:"+ document.body.offsetWeight +" (包括边线的宽)";
s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
s += "\r\n网页正文全文宽:"+ document.body.scrollWidth;
s += "\r\n网页正文全文高:"+ document.body.scrollHeight;
s += "\r\n网页被卷去的高:"+ document.body.scrollTop;
s += "\r\n网页被卷去的左:"+ document.body.scrollLeft;
s += "\r\n网页正文部分上:"+ window.screenTop;
s += "\r\n网页正文部分左:"+ window.screenLeft;
s += "\r\n屏幕分辨率的高:"+ window.screen.height;
s += "\r\n屏幕分辨率的宽:"+ window.screen.width;
s += "\r\n屏幕可用工作区高度:"+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度:"+ window.screen.availWidth;
alert(s);
</SCRIPT>

时间: 2024-07-30 00:18:09

Javascript实例教程:网页中移动拖拽的JS属性的相关文章

javascript实现PC网页里的拖拽效果_javascript技巧

几年前,我参与设计开发一个房产网的项目,我负责前端工作,由于项目经理要求比较高,参考了很多房产类网站比较优秀的功能,想把别人比较优秀的设计和想法集合到一起,那时的设计稿和功能实现,简直就是改了又改,今天做好的一个很好的效果,可能第二天就要推到重来,算了,不说这些了,还是说说我们今天要讲解的案例吧,不知道大家访问过搜房网没有(完全没有做广告之嫌,搜房网,可以给点广告费不),其中有一个功能产品经理特别喜欢,那,就是下面的这个: 这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖

CSS实例教程: 网页中制作浮层叠加效果

文章简介:CSS Overlay技巧. 创建遮照图有几种技术:从使用绝对定位的元素到outline和伪元素.在本文中,我们将探索每个技术的实现样式以及他们之间的利与弊. 设计模式通常是一组最佳实践和技术,主要目的是用来解决一些最常见的设计"问题",通常是在上下文中提出的设计原则.这些原则之是一"停留在页面"的原则.这一原则是建立在页面刷新都打破用户的心中想要的流程基础上,造成所谓的"变盲",我们需要用户无论保时何地可以避免打破这种视觉流程. 我们

掌握Dojo工具包,第4部分:Dojo中的拖拽

Dojo 支持的两种拖拽方式 在开始尝试了解实现 Dojo 拖拽效果的使用方法以前,首先必须明确拖拽具有两种截然不同的表现效果. 第一种表现效果是图标被拖拽到哪里,其就会被直接放到哪里,这个拖拽效果是图标完全紧跟拖拽的动作,与每一个拖拽动作的运动轨迹完全契合,这种效果被称为 "拖动".第二种表现效果是当图标被拖拽到一个地方,松开鼠标的时候,图标会以当前位置为基础而以其它图标为参照系进行位置的自动调整.这种效果被称为 "拖放". Dojo 的拖动 "拖动&q

Javascript实例教程(1) 目录

javascript|教程 javascript是一种基于对象和事件驱动并具有安全性能的脚本语言.使用它的目的是与HTML超文本标记语言.Java 脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用,从而可以开发客户端的应用程序等.它是通过嵌入或调入在标准的HTML语言中实现的.它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择.本javascript实例教程旨在通过介绍一些实例来加深对Javascrip的理解.本系列教程包括:1. 利用jav

Javascript实例教程:DOM方法创建和修改表格

文章简介:Javascript实例教程:DOM方法创建和修改表格. <table>元素是HTML中最复杂的结构之一.要想创建表格,一般都必须涉及表示表格行.单元格.表头等方面的标签.由于涉及的标签多,因而使用核心DOM方法创建和修改表格往往都免不了要编写大量的代码.假设我们要使用DOM来创建下面的HTML表格: <table border="1" width="100%"> <tbody> <tr> <td>

javascript支持firefox,ie7页面布局拖拽效果代码_javascript技巧

javascript 拖拽JavaScript Google IG Drag Demo,非常棒的拖动,准备用于F2Blog新Theme的后台模块设置,之间的拖 动 拖拽效果的页面效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag.htm加强版效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag2.htm拖拽原理: 关于拖拽的基础,可以参考这篇文章,讲得非常不错. 其实原理很简单,就是

javascript实现在网页中运行本地程序的方法_javascript技巧

本文实例讲述了javascript实现在网页中运行本地程序的方法.分享给大家供大家参考,具体如下: <input onclick="exec('notepad.exe')" value="执行noteppad.exe" type="button"> <input onclick="exec('cmd.exe')" value="执行cmd.exe" type="button&qu

js-将&amp;amp;lt;li&amp;amp;gt;拖拽到openlayers地图中,拖拽功能失效

问题描述 将<li>拖拽到openlayers地图中,拖拽功能失效 我现在有个功能,是将外部的图片拖拽到openlayers地图中.图片是用一个ztree树状菜单来显示的,利用ztree的拖拽功能将节点拖到地图中,然后在地图中生成一个图标. 在拖拽的时候,只要鼠标不进入openlayers里,拖拽功能就没问题,一旦光标进入到openlayers地图里,拖拽就好像被屏蔽了,有的时候也可以拖动到地图里,但是就好像卡主了一样,很难移动,各位js大神,有知道该怎么解决的吗?请帮忙解决一下. 解决方案

java swing中实现拖拽功能示例_java

java实现拖拽示例 Swing中实现拖拽功能,代码很简单,都有注释,自己看,运行效果如下图: 复制代码 代码如下: package com; import java.awt.*;import java.awt.datatransfer.DataFlavor;import java.awt.dnd.DnDConstants;import java.awt.dnd.DropTarget;import java.awt.dnd.DropTargetAdapter;import java.awt.dn