鼠标点击控制这一节我们将告诉你如何运用鼠标来控制这些运动方. 请你记住我们的目标是写出兼容在 NetScape 和 Internet Explore 上的程序。鼠标点击控制 跟键盘控制一样,我们可以用鼠标来控制任何动画效果。下面我们将要设立一个连接,当拿鼠标按这个连接的时候, 元素就能滑动, 当你放开鼠标的时候,滑动 就停止了。程序几乎跟键盘控制的一样。
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
block.active = false
}
function slide() {
if (block.active) {
block.xpos += 5
block.left = block.xpos
setTimeout("s...
由于平时不太用到,所以过去写css的时候对于position属性的absolute、 relative值理解比较模糊,对于z-index的层叠更是摸不着头脑,除了理解的因素外,各个浏览器的不同解析结果也是一个大问题。今天仔细阅读了一下css文档,总算是对盒模型的浮动、定位有了比较深刻的理解。我们在实践中很有可能遇到这样的问题:1、做一个横向导航,然后鼠标经过之后出现下拉菜单,那么这个下拉菜单的位置控制就是一个关键;2、我们想在一个正常的页面布局中放入几个浮在页面上的气泡提示,这时既不想让气泡提示破坏正常的文档布局,又不想气泡提示的定位在不同的浏览器中到处乱飘。3、当我们在一句正常的文本中插入一个小图标的话,一般会使用<img />标签...
在以前,为Web页面创建一个打印机友好的版本意味着要设计一个布局和格式都经过修改的单独页面,这样才能够在打印的时候获得令人满意的效果。现在,通过使用结构化的XHTML和CSS,你可以实现同样的效果而只用花费少得多的精力。 从屏幕显示到打印效果 大多数的Web页面都是设计适用于在计算机屏幕上观看的。然而,有的时候用户需要将某些页面打印出来,也许就是为了保留一个长期的记录,或者将其用作方便的离线参考资料。 现在的麻烦是,让Web页面在计算机彩色屏幕上看起来引人注目和五彩缤纷的很多特性,都无法在打印版的Web页面上表现出相同的效果——尤其当打印机是黑白的时候。在被降级为灰度打印的时候,彩色的...
Div + CSS 进行网页布局,适当地运用 absolute 与 relative,能给布局带来意想不到的效果和方便,达到事半功倍…本文介绍了关于 absolute 与 relative 的运用。详细讲解两者的关系,需要配合例子,请先看例子 以下是HTML代码:【运行】【复制】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title&...
1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式,值得注意的是,一定要将xxxx !important 这句放置在另一句之上 6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制...
DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义,块级元素div尽量少用,和table一样,嵌套越少越好ol 有序列表。<ol><li>……</li><li>……</li><li>……</li></ol>表现为:1……2……3……ul 无序列表,表现为li前面是大圆点而不是123<ul><li>……</li><li>……</li></ul>很多人容易忽略 dl dt dd的用法dl 内容块dt 内容块的标题dd 内容可以这么写:<dl><dt>标题</dt><dd>内容1</dd><dd>内容2</...
类别:网页编程 查看:124
更新:2014-06-05
1. document.formName.item("itemName") 问题 说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"]; Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formName.elements["elementName"].2.集合类对象问题 说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象. 解决方法:统一使用[]获取集合类对象.3.自定义属性问题 说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获...
类别:网页编程 查看:143
更新:2014-06-03
outerWidth(options) 返回值:Integer
概述
获取第一个匹配元素外部宽度(默认包括补白和边框)。
此方法对可见和隐藏元素均有效。
参数
optionsBoolean默认值:'false'
设置为 true 时,计算边距在内。
示例
描述:
获取第一段落外部宽度。
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
结果:
<p>Hello</p><p>outerWidth: 65 , outer...
outerHeight(options) 返回值:Integer
概述
获取第一个匹配元素外部高度(默认包括补白和边框)。
此方法对可见和隐藏元素均有效。
参数
optionsBoolean默认值:'false'
设置为 true 时,计算边距在内。
示例
描述:
获取第一段落外部高度。
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
结果:
<p>Hello</p><p>outerHeight: 35 ,...
innerWidth() 返回值:Integer
概述
获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。
此方法对可见和隐藏元素均有效。
示例
描述:
获取第一段落内部区域宽度。
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );
结果:
<p>Hello</p><p>innerWidth: 40</p>
...
innerHeight() 返回值:Integer
概述
获取第一个匹配元素内部区域高度(包括补白、不包括边框)。
此方法对可见和隐藏元素均有效。
示例
描述:
获取第一段落内部区域高度。
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
结果:
<p>Hello</p><p>innerHeight: 16</p>
...
width(val) 返回值:jQuery
概述
为每个匹配的元素设置CSS宽度(width)属性的值。
如果没有明确指定单位(如:em或%),使用px。
参数
valString, Number
设定 CSS 'width' 的属性值
示例
描述:
将所有段落的宽设为 20:
jQuery 代码:
$("p").width(20);
width() 返回值:Integer
概述
取得第一个匹配元素当前计算的宽度值(px)。
在 jQuery 1.2 以后可以用来获取 window 和 document 的宽
示例
描述:
获取第一段的宽
jQuery 代码:
$("p").width();
描述:
获取当前窗口的宽
jQuery 代码:
$(window).width();
height(val) 返回值:jQuery
概述
为每个匹配的元素设置CSS高度(hidth)属性的值。如果没有明确指定单位(如:em或%),使用px。
如果没有明确指定单位(如:em或%),使用px。
参数
valString, Number
设定CSS中 'height' 的值
示例
描述:
把所有段落的高设为 20:
jQuery 代码:
$("p").height(20);
height() 返回值:Integer
概述
取得第一个匹配元素当前计算的高度值(px)。
在 jQuery 1.2 以后可以用来获取 window 和 document 的高
示例
描述:
获取第一段的高
jQuery 代码:
$("p").height();
描述:
获取文档的高
jQuery 代码:
$(document).height();
scrollLeft(val) 返回值:jQuery
概述
传递参数值时,设置水平滚动条左侧偏移为该值。
此方法对可见和隐藏元素均有效。
参数
valString, Number
设定水平滚动条值
示例
描述:
设置相对滚动条左侧的偏移
jQuery 代码:
$("div.demo").scrollLeft(300);