网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

常见的JavaScript网页特效你知道吗?这里向大家简单描述一下,比如说动态字幕,当你把鼠标指向字幕时字幕停止并有链接、移开鼠标指针字幕又滚动了,运用以上代码即可实现。

window.document

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent
属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent
属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop
属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop
相对文档的水平座标+垂直方向滚动的量

JavaScript网页特效5则

1,确认元素,

IE,FireFox 差异如下:

动态字幕

document.getElementById(“id”);           根据id找元素

IE6.0、FF1.06+:

代码:在需要处加入 

doucment.getElementsByName(“name”);      根据name找,出来的数组

clientWidth = width + padding

<marqueeonmouseovermarqueeonmouseover=this.stop()onmouseout=this.start()>  

doucment.getElementsByTagName(“name”);       根据标签找,找出来的是数组

clientHeight = height + padding

特点:JavaScript网页特效中当你把鼠标指向字幕时字幕停止并有链接、移开鼠标指针字幕又滚动了,运用以上代码即可实现。
延伸:动态字幕有一个属性“direction”,它是控制字幕滚动方向的,把“direction”的属性改为“up”,就可以实现向上滚动,同理当改为“down”时就向下滚动,那么“left”和“right”自然就是向左和向右了。

doucment.getElementsByClassName(“name”);      
根据标clssname,找出来的是数组

offsetWidth = width + padding + border

自动刷新

 

offsetHeight = height + padding + border

代码:在网页的和之间加入 

2,获取、操作内容

IE5.0/5.5: clientWidth = width – border

<metahttpequivmetahttpequiv="refresh"content="15;url=cesi.htm">  

var  a= document.getElementById(“ID”);

clientHeight = height – border

解释:如果你的主页有一个欢迎页面,你希望它在显示15秒后转入你的首页,你可以使用以上的代码,时间可改为你想要的时间。下面看一下JavaScript网页特效中如何关闭窗口。

非表单   a.innerHTML  获取内容

offsetWidth = width

关闭窗口

           a.innerHTML=””    设置内容

offsetHeight = height

①以按钮方式

表单     a.value   获取内容

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

代码:在你需要处加入 

           a.value =””   设置内容

=====================================================

<INPUTonclickINPUTonclick=window.close()type=buttonvalue=关闭窗口>  

 

昨天给项目中的一些页面更换了版式,更换完毕后发现一些js不好使了。通过document.documentElement.clientWidth这样的语句获得的页面宽度为0
。经过一番google,才知道是新页面上缺少了对W3C标准的引用,导致document.documentElement.clientWidth失效:

解释:本代码结果是以按钮关闭当前页面。

3,操作属性

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;

②以链接方式

var  a= document.getElementById(“ID”);

如果在页面中添加这行标记的话

代码:在你需要处加入 

a.setAttribute(“属性名”,“属性值”);     设置一个 新的属性

在IE中: document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

<ahrefahref="#"onClick="javascipt:window.close();  returnfalse;">关闭窗口    

a.getAttribute(“属性名”)     获取属性的值

在FireFox中
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

解释:本代码结果是以链接关闭当前页面。

a.removeAttribute (“属性名”);    移除一个属性

在Opera中: document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==>
页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==>
页面对象高度(即BODY对象高度加上Margin高)
而如果没有定义W3C的标准,则

③定时关闭

IE为: document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

代码:在网页的和之间加入 

FireFox为:
document.documentElement.clientWidth ==>
页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight
==> 页面对象高度(即BODY对象高度加上Margin高)

Opera为:

document.documentElement.clientWidth ==>
页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight
==> 页面对象高度(即BODY对象高度加上Margin高)

<scriptlanguagescriptlanguage="JavaScript">  

网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见…

解释:加入此代码后网页会在打开3秒后自动关闭(3000代表3000毫秒即3秒)。

反续排列

代码:在需要处加入 

<bdodirbdodir="rtl">反续列   

特点:JavaScript网页特效中当你需要把一段话反起来排列时,你怎么办呢?反起来一个一个地输入吗?只要使用以上代码,即可实现。

网页的下划线

代码:在网页的和之间加入 

<StyleTypeStyleType="text/css">  

介绍:许多朋友觉得那些链接下的下划线非常碍眼,加入以上代码后,当访问者指向链接时才有下划线,平时没有。
 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图