您当前的位置: 首页 » HTML/XHTML/XML编程 » 网页设计中11种效果实现
网页设计中11种效果实现
论坛链接
1．不同时间段显示不同问候语
＜script Language="Javascript"＞
＜!--
var text=""; day = new Date( ); time = day.getHours( );
if (( time＞=0) && (time ＜ 7 ))
text="夜猫子，要注意身体哦！ "
if (( time ＞= 7 ) && (time ＜ 12))
text="今天的阳光真灿烂啊，你那个朋友呢？"
if (( time ＞= 12) && (time ＜ 14))
text="午休时间。您要保持睡眠哦！"
if (( time ＞=14) && (time ＜ 18))
text="祝您下午工作愉快！ " 站长.站
if ((time ＞= 18) && (time ＜= 22))
text="您又来了，可别和MM聊太久哦！"
if ((time ＞= 22) && (time ＜ 24))
text="您应该休息了！"
document.write(text)
//---＞
＜/script＞
2．水中倒影效果
＜img id="reflect" src="../../你自己的图片文件名" width="175" height="59"＞
＜script language="Javascript"＞
function f1()
{
setInterval("mdiv.filters.wave.phase+=10",100);
}
if (document.all)
{
document.write('＜img id=mdiv src="'+document.all.reflect.src+'"
style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()"＞')
window.onload=f1
}
＜/script＞
3．慢慢变大的窗口
＜script Language="Javascript"＞
＜!--
var Windowsheight=100
var Windowswidth=100
var numx=5
function openwindow(thelocation){
temploc=thelocation
if
(!(window.resizeTo&&document.all)&&!(window.resizeTo&&document.getElementById))
{
window.open(thelocation)
return
}
windowsize=window.open("","","scrollbars")
windowsize.moveTo(0,0)
windowsize.resizeTo(100,100)
tenumxt()
}
function tenumxt(){ Chinaz@com
if (Windowsheight＞=screen.availHeight-3)
numx=0
windowsize.resizeBy(5,numx)
Windowsheight+=5
Windowswidth+=5
if (Windowswidth＞=screen.width-5)
{
windowsize.location=temploc
Windowsheight=100
Windowswidth=100
numx=5
return
}
setTimeout("tenumxt()",50)
}
//--＞
＜/script＞
＜p＞＜a href="javascript:openwindow('http://www.ccjol.com')"＞进入＜/a＞
4．改变IE地址栏的IE图标
我们要先做一个16*16的icon（图标文件），保存为index.ico。把这个图标文件上传到根目录下并在首页＜head＞＜/head＞之间加上如下代码：
＜link REL = "Shortcut Icon" href="index.ico"＞
5．让网页随意后退
＜a href="javascript:history.go(-X)"＞X＜/a＞ //把X换成你想要后退在页数
//把“-”变成“+”就为前进
＜script Language="Javascript"＞
＜!--
var text=""; day = new Date( ); time = day.getHours( );
if (( time＞=0) && (time ＜ 7 ))
text="夜猫子，要注意身体哦！ "
if (( time ＞= 7 ) && (time ＜ 12))
text="今天的阳光真灿烂啊，你那个朋友呢？"
if (( time ＞= 12) && (time ＜ 14))
text="午休时间。您要保持睡眠哦！"
if (( time ＞=14) && (time ＜ 18))
text="祝您下午工作愉快！ " 站长.站
if ((time ＞= 18) && (time ＜= 22))
text="您又来了，可别和MM聊太久哦！"
if ((time ＞= 22) && (time ＜ 24))
text="您应该休息了！"
document.write(text)
//---＞
＜/script＞
2．水中倒影效果
＜img id="reflect" src="../../你自己的图片文件名" width="175" height="59"＞
＜script language="Javascript"＞
function f1()
{
setInterval("mdiv.filters.wave.phase+=10",100);
}
if (document.all)
{
document.write('＜img id=mdiv src="'+document.all.reflect.src+'"
style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()"＞')
window.onload=f1
}
＜/script＞
3．慢慢变大的窗口
＜script Language="Javascript"＞
＜!--
var Windowsheight=100
var Windowswidth=100
var numx=5
function openwindow(thelocation){
temploc=thelocation
if
(!(window.resizeTo&&document.all)&&!(window.resizeTo&&document.getElementById))
{
window.open(thelocation)
return
}
windowsize=window.open("","","scrollbars")
windowsize.moveTo(0,0)
windowsize.resizeTo(100,100)
tenumxt()
}
function tenumxt(){ Chinaz@com
if (Windowsheight＞=screen.availHeight-3)
numx=0
windowsize.resizeBy(5,numx)
Windowsheight+=5
Windowswidth+=5
if (Windowswidth＞=screen.width-5)
{
windowsize.location=temploc
Windowsheight=100
Windowswidth=100
numx=5
return
}
setTimeout("tenumxt()",50)
}
//--＞
＜/script＞
＜p＞＜a href="javascript:openwindow('http://www.ccjol.com')"＞进入＜/a＞
4．改变IE地址栏的IE图标
我们要先做一个16*16的icon（图标文件），保存为index.ico。把这个图标文件上传到根目录下并在首页＜head＞＜/head＞之间加上如下代码：
＜link REL = "Shortcut Icon" href="index.ico"＞
5．让网页随意后退
＜a href="javascript:history.go(-X)"＞X＜/a＞ //把X换成你想要后退在页数
//把“-”变成“+”就为前进
#2楼发布者：superadmin时间：2008-04-14 15:37:10
6．鼠标指向时弹出信息框
在＜body＞＜/body＞之间加上如下代码：
＜a href onmouseover="alert('弹出信息！')"＞显示的链接文字＜/a＞
7．单击鼠标右键弹出添加收藏夹对话框
在＜body＞＜/body＞之间加上如下代码：
8．随机变换背景图象（一个可以刷新心情的特效）
在＜head＞＜/head＞之间加上如下代码：
＜script Language="Javascript"＞
image = new Array(4); //定义image为图片数量的数组
image [0] = 'tu0.gif' //背景图象的路径
image [1] = 'tu1.gif'
image [2] = 'tu2.gif'
image [3] = 'tu3.gif'
image [4] = 'tu4.gif'
number = Math.floor(Math.random() * image.length);
document.write("＜BODY BACKGROUND="+image[number]+"＞");
＜/script＞
9．鼠标一碰就给颜色看的链接
在＜body＞＜/body＞之间加上如下代码：
＜p onMouseMove="anniu()"＞你敢碰我，我就给点颜色你看！＜/p＞
＜script Language = "VBscript"＞
sub anniu
document.fgColor=int(256*256*256*rnd)
end sub
＜/script＞
10．从天而降并有幻影效果的窗口
＜head＞
＜script language="Javascript"＞
function move(x) {
if(self.moveBy){
self.moveBy (0,-800);
for(i = x; i ＞ 0; i--)
{
self.moveBy(0,3);
}
for(j = 200; j ＞ 0; j--){ //如果你认为窗口抖动厉害，就200换成个位数
self.moveBy(0,j);
self.moveBy(j,0);
self.moveBy(0,-j);
self.moveBy(-j,0);
}
}
}
＜/Scrip＞
＜body bgColor=#ffffff onload=move(280)＞
＜/body＞
＜/head＞
11．表格的半透明显示效果
在＜head＞＜/head＞之间加上如下代码：
＜style＞
.alpha{filter: Alpha(Opacity=50)} //50表示50%的透明度
＜/style＞
Www^Chinaz^com
在＜body＞＜/body＞之间加上如下代码：
＜table border="1" width="100" height="62" class="alpha" bgcolor="#F2A664" ＞
＜tr＞
＜td width="100%" height="62"＞
＜div align="center"＞很酷吧!＜/div＞
＜/td＞
＜/tr＞
＜/table＞
在＜body＞＜/body＞之间加上如下代码：
＜a href onmouseover="alert('弹出信息！')"＞显示的链接文字＜/a＞
7．单击鼠标右键弹出添加收藏夹对话框
在＜body＞＜/body＞之间加上如下代码：
8．随机变换背景图象（一个可以刷新心情的特效）
在＜head＞＜/head＞之间加上如下代码：
＜script Language="Javascript"＞
image = new Array(4); //定义image为图片数量的数组
image [0] = 'tu0.gif' //背景图象的路径
image [1] = 'tu1.gif'
image [2] = 'tu2.gif'
image [3] = 'tu3.gif'
image [4] = 'tu4.gif'
number = Math.floor(Math.random() * image.length);
document.write("＜BODY BACKGROUND="+image[number]+"＞");
＜/script＞
9．鼠标一碰就给颜色看的链接
在＜body＞＜/body＞之间加上如下代码：
＜p onMouseMove="anniu()"＞你敢碰我，我就给点颜色你看！＜/p＞
＜script Language = "VBscript"＞
sub anniu
document.fgColor=int(256*256*256*rnd)
end sub
＜/script＞
10．从天而降并有幻影效果的窗口
＜head＞
＜script language="Javascript"＞
function move(x) {
if(self.moveBy){
self.moveBy (0,-800);
for(i = x; i ＞ 0; i--)
{
self.moveBy(0,3);
}
for(j = 200; j ＞ 0; j--){ //如果你认为窗口抖动厉害，就200换成个位数
self.moveBy(0,j);
self.moveBy(j,0);
self.moveBy(0,-j);
self.moveBy(-j,0);
}
}
}
＜/Scrip＞
＜body bgColor=#ffffff onload=move(280)＞
＜/body＞
＜/head＞
11．表格的半透明显示效果
在＜head＞＜/head＞之间加上如下代码：
＜style＞
.alpha{filter: Alpha(Opacity=50)} //50表示50%的透明度
＜/style＞
Www^Chinaz^com
在＜body＞＜/body＞之间加上如下代码：
＜table border="1" width="100" height="62" class="alpha" bgcolor="#F2A664" ＞
＜tr＞
＜td width="100%" height="62"＞
＜div align="center"＞很酷吧!＜/div＞
＜/td＞
＜/tr＞
＜/table＞