获取鼠标位置是编写拖放操作和上下文菜单的基础,这些功能都需要JavaScript与CSS的配合才能实现。
1. 获取鼠标光标相对于整个页面的x和y位置。因为只能从鼠标事件中才能获得鼠标坐标的信息,所以需要鼠标事件作为参数。
// 鼠标光标的水平位置
function get...
11年前 (2013-12-15) 3280℃
0喜欢
有了构建动态页面的基本能力,接下来实现Web应用程序中最流行、最显著的效果:动画。巧妙地使用动画可以为用户提供十分有用的反馈,可以把用户的注意力吸引到指定的元素上来。
滑动
第一个动画是把一个隐藏元素(display:none)显示出来。即将指定的元素在短时间内随着高度的增加而逐...
11年前 (2013-12-15) 2993℃
0喜欢
利用元素的可见性,可以创建一些动画效果,提供基本的用户交互能力。CSS哟两种方式来隐藏元素:
□ visibility : 切换可见性的同时保持元素流属性的相关影响。意思是,即时隐藏元素,元素的位置依旧会保留。两个值:visible 和 hidden
□ display : 属性...
11年前 (2013-12-14) 3158℃
0喜欢
获取元素的高度和宽度可以很容易,也可以很困难,取决于不同的场合。在大多数情况下,仅需要利用getStyle函数就可以得到元素的当前高度和宽度。
// 获取元素的真实高度
function getHeight( elem ) {
return parseInt( g...
11年前 (2013-12-14) 2766℃
0喜欢
使用位置、尺寸和可见性基本就可以在现代浏览器中模拟绝大多数常见的用户效果了。元素的位置是实现交互效果的基础。在CSS中,元素使用偏移量来定位,它是通过元素到它父元素的左上角的偏移量来计算。CSS的坐标系如下图
页面上的所有元素都有left(水平位置)和top(垂直位置)的偏移量...
11年前 (2013-12-13) 3661℃
0喜欢
JavaScript与CSS之间的交互是现代JavaScript编程的支柱之一,运用某型形式的动态交互几乎是所有现代Web应用程序的必备条件。这样可以使页面加载时间更短。JavaScript与CSS之间的交互以及事件的动态绑定方法,它们构成了创建无缝且强大用户体验的基础。
访问和...
11年前 (2013-12-12) 2868℃
0喜欢
分离地、自然地编写JavaScript程序是一个相当重要的目标。使代码可以在现代浏览器中工作,而对于古老的浏览器可以做到预留退路。如果正确地使用了JavaScript脚本,就可以让访问者在他们的浏览器不支持JavaScript的情况下仍然能顺利地浏览网站,这就是所谓的平稳退化(g...
11年前 (2013-12-11) 2705℃
0喜欢
1. 鼠标事件:可以分成两类:追踪鼠标当前定位( mouseover, mouseout ) 的事件和追踪鼠标点击( click, mousedown, mouseup ) 的事件
2. 键盘事件:有3种类型:keydown, keyup 和 keypress
3. UI事件:追...
11年前 (2013-12-10) 3070℃
0喜欢
有3中事件注册方式,传统的行内方式,IE方式和W3C方式。
传统绑定
传统绑定为需要绑定的DOM元素绑定一个函数,作为它的属性。例如:
// 查找 <form> 元素并为它绑定 submit 事件处理函数
document.getElementsByTagNam...
11年前 (2013-12-10) 11077℃
0喜欢
事件对象
事件处理函数的一个标准特性是,事件对象包含了上下文信息。例如,当处理键盘事件时可以访问该对象的keyCode属性来获得具体的键值。然而,事件对象在IE的实现与W3C的规范还是有差别。IE使用独立的全局事件对象(window.event),而其它浏览器则使用全局参数。下面...
11年前 (2013-12-09) 3057℃
0喜欢
动态绑定事件是分离式DOM脚本编程的重要特性,编写可用性JavaScript代码的目标是,不管用户使用的是何种浏览器、何种平台,都能够让网页正常运作。为此,指定一个特性指标,并排除不支持的浏览器。对于不支持的浏览器,为它编写一个交互更少的网页。而这种编写JavaScrip...
11年前 (2013-12-08) 3447℃
0喜欢
使用DOM创建节点
createElement函数可以用来创建新元素,它以标记名称为参数,并返回该元素的实际DOM引用,没有默认的属性和样式。同时创建的元素必须使用正确的XML命名空间。例如:
function create( elem ) {
return doc...
11年前 (2013-12-06) 3426℃
0喜欢
获取和设置元素属性(attribute)的值是最常使用的操作之一。通常,元素自带的属性列表会存储成关联数组格式。例如:
<form name="myForm" action="/test.cgi" method="POS...
11年前 (2013-12-05) 3507℃
2喜欢
Hello how are you doing?
在上面的HTML片段中,DOM结构是:
它有一个<p>主元素,它包含一个<strong>元素和一段文本块,<strong>元素本身包括文本块。
如果要获取这些元素中的文本,所有非Mozilla...
11年前 (2013-12-04) 3460℃
1喜欢
通过类和CSS选择器(selector)能实现在HTML文档中查找元素。通过类名来定位元素是一种很普遍的技术,2003年由Simon Willison(http://simon.incutio.com/)普及,而原创的则是Andrew hayward(http://www.moo...
11年前 (2013-12-04) 3248℃
0喜欢