js背景制作源码.docx
《js背景制作源码.docx》由会员分享，可在线阅读，更多相关《js背景制作源码.docx（18页珍藏版）》请在冰豆网上搜索。
js背景制作源码
1appCodeName属性是一个只读字符串，声明了浏览器的代码名。
在所有以Netscape代码为基础的浏览器中，它的值是"Mozilla"。
为了兼容起见，在Microsoft的浏览器中，它的值也是"Mozilla"。
语法
navigator.appCodeName
实例
document.write（"
CodeName:
"）
document.write（navigator.appCodeName+"
"）
2appMinorVersion属性可返回浏览器的次要版本。
语法
navigator.appMinorVersion
实例
document.write（"
MinorVersion:
"）
document.write（navigator.appMinorVersion+"
"）
3appName属性可返回浏览器的名称。
appName属性是一个只读到字符串，声明了浏览器的名称。
在基于Netscape的浏览器中，这个属性的值是"Netscape"。
在IE中，这个属性的值是"MicrosoftInternetExplorer"。
其他浏览器可以正确地表示自己或者伪装成其他的浏览器以达到兼容性。
语法
navigator.appMinorVersion
实例
document.write（"
Name:
"）
document.write（navigator.appName+"
"）
4appVersion属性可返回浏览器的平台和版本信息。
该属性是一个只读的字符串。
该字符串的第一部分是版本号。
把该字符串传递给parseInt（）只能获取主版本号。
该属性的其余部分提供了有关浏览器版本的其他细节，包括运行它的操作系统的信息。
语法
navigator.appVersion
提示和注释
注释：
不同浏览器提供的信息的格式是不同的。
实例
document.write（"
Version:
"）
document.write（navigator.appVersion+"
"）
5arc（）方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧。
语法
arc（x,y,radius,startAngle,endAngle,counterclockwise）
参数
参数
描述
x,y
描述弧的圆形的圆心的坐标。
radius
描述弧的圆形的半径。
startAngle,endAngle
沿着圆指定弧的开始点和结束点的一个角度。
这个角度用弧度来衡量。
沿着X轴正半轴的三点钟方向的角度为0，角度沿着逆时针方向而增加。
counterclockwise
弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。
描述
这个方法的头5个参数指定了圆周的一个起始点和结束点。
调用这个方法会在当前点和当前子路径的起始点之间添加一条直线。
接下来，它沿着圆周，在子路径的起始点和结束点之间添加弧。
最后一个counterclockwise参数指定了圆应该沿着哪个方向遍历来连接起始点和结束点。
这个方法将当前位置设置为弧的终点。
6arcTo（）方法使用使用切点和一个半径，来为当前子路径添加一条圆弧。
语法
arc（x1,y1,x2,y2,radius）
参数
参数
描述
x1,y1
点P1的坐标。
x2,y2
点P2的坐标。
radius
定义圆弧的圆的半径。
描述
这个方法为当前的子路径添加了一条圆弧，但是，它所描述的这条圆弧和arc（）方法所描述的圆弧大不相同。
添加给路径的圆弧是具有指定radius的圆的一部分。
该圆弧有一个点与当前位置到P1的线段相切，还有一个点和从P1到P2的线段相切。
这两个切点就是圆弧的起点和终点，圆弧绘制的方向就是连接这两个点的最短圆弧的方向。
在很多常见的应用中，圆弧开始于当前位置而结束于P2，但情况并不总是这样。
如果当前的位置和圆弧的起点不同，这个方法添加了一条从当前位置到圆弧起点的直线。
这个方法总是将当前位置设置为圆弧的终点。
实例
可以用下面的代码绘制一个矩形的右上角（圆角）：
c.moveTo（10,10）;//在左上方开始
c.lineTo（90,10）;//到达圆角开始点的水平线
c.arcTo（100,10,100,20,10）;//圆角
c.lineTo（100,100）;//到达右下方的垂直线
7assign（）方法可加载一个新的文档。
语法
location.assign（URL）
实例
下面的例子将使用assign（）来加载一个新的文档：
functionnewDoc（）
{
window.location.assign（""）
}
8availHeight属性声明了显示浏览器的屏幕的可用高度，以像素计。
在Windows这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。
语法
screen.availHeight
实例
document.write（"
AvailableHeight:
"）
document.write（screen.availHeight+"
"）
9availWidth属性声明了显示浏览器的屏幕的可用宽度，以像素计。
在Windows这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。
语法
screen.availWidth
实例
document.write（"
AvailableWidth:
"）
document.write（screen.availWidth+"
"）
10axis属性可设置或返回一个由逗号分隔的列表，其中包含了一组类型（有关联的单元格）的名称。
axis属性可为某个单元格定义类型名称。
语法
tabledataObject.axis=text
实例
下面的例子可返回单元格的axis：
<
functionalertAxis（）
{
alert（document.getElementById（'td3'）.axis）;
}
| Firstname | Lastname | City |
|---|
Harry
Potter
NY
|
Peter
Griffin
LasVegas
|
value="Alertaxis"/>
11back（）方法可加载历史列表中的前一个URL（如果存在）。
调用该方法的效果等价于点击后退按钮或调用history.go（-1）。
语法
history.back（）
实例
下面的例子可在页面上创建一个后退按钮：
functiongoBack（）
{
window.history.back（）
}
12background属性在一个声明中设置所有的背景属性。
语法：
Object.style.background=background-colorbackground-image
background-repeatbackground-attachmentbackground-position
参数
描述
值
background-color
设置元素的背景色。
∙color-name
∙color-rgb
∙color-hex
∙transparent
background-image
设置背景图像。
∙url（URL）
∙none
background-repeat
设置背景图像是否及如何重复。
∙repeat
∙repeat-x
∙repeat-y
∙no-repeat
background-attachment
背景图像是否固定或者随着页面的其余部分滚动。
∙scroll
∙fixed
background-position
设置背景图像的起始位置。
∙topleft
∙topcenter
∙topright
∙centerleft
∙centercenter
∙centerright
∙bottomleft
∙bottomcenter
∙bottomright
∙x%y%
∙xposypos
实例
下面的例子改变了文档背景的样式：
functionsetStyle（）
{
document.body.style.background="#FFCC80url（bgdesert.jpg）repeat-y";
}
value="Setbackgroundstyle"/>
13backgroundAttachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
语法：
Object.style.backgroundAttachment=scroll|fixed
提示和注释
提示：
请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。
实例
本例设置在点击按钮后把背景图像设置为固定（不滚动）：
body
{
background-color="#FFCC80";
background-image:
url（bgdesert.jpg）;
}
p
{
color:
white;
}
functionchangeAttachment（）
{
document.body.style.backgroundAttachment="fixed";
}
value="Setbackground-imagetobefixed"/>
Thisisaparagraph
Thisisaparagraph
Thisisaparagraph
Thisisaparagraph
Thisisaparagraph
Thisisaparagraph
Thisisaparagraph
Thisisaparagraph
Thisisaparagraph
Thisisaparagraph
Thisisaparagraph
Thisisaparagraph
Thisisaparagraph
Thisisaparagraph
14backgroundColor属性设置元素的背景颜色。
语法：
Object.style.backgroundColor=color-name|color-rgb
|color-hex|transparent
实例
本例设置body的背景色：
body
{
background-color:
#B8BFD8;
}
functionchangeStyle（）
{
document.body.style.backgroundColor="#FFCC80";
}
value="Changebackgroundcolor"/>
15backgroundImage属性设置元素的背景图像。
语法：
Object.style.backgroundImage=url（URL）|none
参数
描述
url（URL）
图像的路径。
none
无背景图像。
提示和注释
提示：
请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。
实例
本例设置了背景图像：
functionchangeStyle（）
{
document.body.style.backgroundColor="#FFCC80";
document.body.style.backgroundImage="url（bgdesert.jpg）";
}
value="Setbackgroundimage"/>
16backgroundPosition属性设置背景图像的位置。
语法：
Object.style.backgroundPosition=position
参数
描述
∙topleft
∙topcenter
∙topright
∙centerleft
∙centercenter
∙centerright
∙bottomleft
∙bottomcenter
∙bottomright
如果您仅规定了一个关键词，那么第二个值将是"center"。
默认值：
0%0%。
x%y%
第一个值是水平位置，第二个值是垂直位置。
左上角是0%0%。
右下角是100%100%。
如果您仅规定了一个值，另一个值将是50%。
xposypos
第一个值是水平位置，第二个值是垂直位置。
左上角是00。
单位是像素（0px0px）或任何其他的CSS单位。
如果您仅规定了一个值，另一个值将是50%。
您可以混合使用%和position值。
实例
本例改变背景图像的位置：
body
{
background-color:
#FFCC80;
background-image:
url（bgdesert.jpg）;
background-repeat:
no-repeat
}
functionchangePosition（）
{
document.body.style.backgroundPosition="bottomcenter";
}
value="Changebackground-imageposition"/>
17backgroundPositionX属性设置背景图像的水平位置。
语法：
Object.style.backgroundPositionX=position
参数
描述
∙left
∙center
∙right
水平位置。
x%
水平位置。
左是0%。
右是100%。
xpos
水平位置。
左是0。
单位是像素（0px）或其他CSS单位。
实例
本例改变了背景图像的水平位置：
body
{
background-color:
#FFCC80;
background-image:
url（bgdesert.jpg）;
background-repeat:
no-repeat
}
functionchangePosition（）
{
document.body.style.backgroundPositionX="right";
}
value="Changebackground-image'sx-position"/>
18backgroundPositionY属性设置background-image的垂直位置。
语法：
Object.style.backgroundPositionY=position
参数
描述
∙top
∙center
∙bottom
垂直位置。
y%
垂直位置。
Top是0%。
Bottom是100%
ypos
垂直位置。
Top是0。
单位是像素（0px）或其他CSS单位。
实例
下面的例子改变background-image的垂直位置：
body
{
background-color:
#FFCC80;
background-image:
url（bgdesert.jpg）;
background-repeat:
no-repeat
}
functionchangePosition（）
{
document.body.style.backgroundPositionY="bottom";
}
value="Changebackground-image'sy-position"/>
19backgroundRepeat属性设置背景图像是否及如何重复。
语法：
Object.style.backgroundRepeat=repeat_value
参数
描述
repeat
默认。
背景图像将在垂直方向和水平方向重复。
repeat-x
背景图像将在水平方向重复。
repeat-y
背景图像将在垂直方向重复。
no-repeat
背景图像将仅显示一次。
实例
本例仅在y轴重复背景图像：
body
{
background-color:
#FFCC80;
background-image:
url（bgdesert.jpg）;
}
functionchangeRepeat（）
{
document.body.style.backgroundRepeat="repeat-y";
}
value="Repeatbackground-imageonlyonthey-axis"/>
升级会员 