1、网页按钮使用的各种代码- 按钮总的来说是WINDOWIN中最学用的也是最基本的一种控制部件,比如在各种编程语言中及应用程序中都少不了按钮的参与,在网页设计中也是如此,通过按钮可以完成很多任务,以下将全面讲解按钮使用技巧及应用实例。 - 一、按钮的基本使用 - 一般的可视性网页制作工具中,都有方便的按钮填加工具,可直接在网页的合适位置填加按钮,如果你使用手工的网页制作方法,那么可用下面的源代码制作按钮,其中onclick决定按下按钮的动作: onclick - 如果只使用单独的按钮,那么可省略form标签,只使用单纯的按钮代码,将节省按钮所占的网页空间: onclick - 二、按钮的前景与背景
2、控制 - 绝大多数的人使用按钮时,都直接使用缺省的灰白色按钮有黑色的文字说明,其实按钮的背景和前景是可以随意改变的,请看下面的代码: - 其中background-color控制背景色,color按钮前景色; - 三、按钮的图片背景 - 按钮不仅可以修改前景色和背景颜色,而且可以使用图片背景,下面的代码分别演示了固定的背景图片效果和动态的图片背景效果,动态的效果即在鼠标放到按钮上时,按钮的背景是另外一种图像背景,而鼠标离开时则恢复原来的图片背景,下面代码中的和 分别为两个图像文件: !- if after=new Image() = function change2(image) var el
3、= if =INPUT&=button) url+(+image+) igChange color:blue; font-weight:bolder; font-size:175%;letter-spacing:4px; text-transform: uppercase; background:yellow .start color:ff0000; background:c8ff4e .over color:ffff00; background:0000ff function highlightButton(s) if (INPUT= - 六、鼠标移动按钮变字号 - 利用同样的方法,也可以使
4、按钮在鼠标移动时变换字号,其实字号的变化也引起了按钮尺寸的变化,这一效果能够引起游览者的注意力,当然也可以合起来使字号和颜色同时发生变化: 变号按钮 .bigChange color:blue; letter-spacing:4px; text-transform: uppercase; background:yellow .start font-size:12pt .over font-size:9pt function highlightButton(s) if (INPUT= - 七、按钮上显示时钟 - 按钮上显示的信息不仅可以事先定义成固定的字符串,而且可以随时更改,当然你也可以把一些
5、动态的信息送到按钮上,下面是在按钮上显示走动的时钟的例子,效果非常好: day = new Date(); miVisit = (); function clock() dayTwo = new Date(); hrNow = (); mnNow = (); scNow = (); miNow = (); if (hrNow = 0) hour = 12;ap = AM; else if(hrNow = 13) hour = (hrNow - 12);ap = PM; if (hrNow = 13) hour = hrNow - 12; if (mnNow = 9) min = 0 + mnN
6、ow; else (min = mnNow) if (scNow = 9) secs = 0 + scNow; else secs = scNow; time = hour + : + min + : + secs + ap; = time; = time; setTimeout(clock(), 1000); ( + ); onError = null; clock(); - 八、按钮控制显示源文件 - 为了方便别人学习你的网页设计方法,在主页上放置一个按钮,按下该按钮后即自动显示源文件,是不是非常实用?代码如下,放到主页的正文区: - 九、按钮链接站点 - 这是按钮的一种最简单使用方法,按
7、下按钮后转到一个站点: onclick= / - 十、按钮改变页面背景 - 通过按钮可以实时修改页面的颜色,如果让其自动在两种颜色之间快速切换背景颜色,就形成了闪烁效果,下面的代码设置了两个按钮,分别演示修改背景和闪烁效果,代码放到主页的正文区: function BgButton() if =#00ffff) =#ffffff; else=#00ffff; function blinkOn() = 0000ff nTimes+ JSCTimeOutID = (blinkOff(),50); function blinkOff() = FFFFFF if (nTimes 3) JSCTimeO
8、utID = (blinkOn(),50); else function blinkit(aWin) nTimes = 0 theWin = aWin JSCTimeOutID = (blinkOn(),50); - 十一、按钮刷新页面 - 尽管浏览器上都有刷新按钮,但在主页中设置上则显得页面更为完善,尤其是那些经常需要刷新的场合,实现刷新有两种方法,代码分别如下,请放到主页的正文区: 代码一: 代码二: - 十二、滚屏按钮 - 按下按钮后,屏幕内容开始向上滚动,代码如下,但一页长度必须超出一屏,否则将看不到滚动效果: !- function scrollit() for (I=1; I -
9、十三、加入书签按钮 - 利用文字链接也可以实现加入书签功能,但使用按钮则更为醒目和直观,按下按钮后,则可把指定的站点加到游览器的书签中,代码如下: - 十四、按钮字幕 - 移动的字幕并不少见,比如在FRONTPAGE 中有现成的字幕生成器,而利用JAVA实现的走马灯效果更是花样百出,其实使用按钮制作字幕效果更为独特,按钮会随着字符的数量而发生尺寸变化,动态很强,以下为完成的代码,请放到网页的正文区: var id,pause=0,position=0; function banner() var i,k,msg=欢迎访问网页教学网;/ increase msg k=(30/+1; for(i=0;i =k;i+) msg+= +msg; if(position+= position=0; id=setTimeout(banner(),60); banner();
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1