通过鼠标的onMouseOver(鼠标经过)事件和onMouseOut(鼠标离开)事件改变表格单元的背景色
<table border="1" cellpadding="0" cellspacing="1" bordercolor="#000000" bgcolor="#333333"> <tr> <td width="86" height="24" align="center" onMouseOver="this.style.backgroundColor='#FFCC99'" onMouseOut="this.style.backgroundColor=''"> <a href="#" target="_self" onFocus="if(this.blur)this.blur()">新闻</a></td> </tr> </table>代码说明:
以下代码为设置当鼠标移经过时所改变的单元背景色为“#FFCC99”
onMouseOver="this.style.backgroundColor='#FFCC99'"以下代码为设置当鼠标移离开时所产生的变化,这代码中设置的为无背景色,即显示表格本身的背景色(#333333)
onMouseOut="this.style.backgroundColor=''"效果演示
新闻 | 财经 | 娱乐 | 影视 | 音乐 |
通过鼠标的onMouseOver(鼠标经过)事件和onMouseOut(鼠标离开)事件改变表格单元的背景图片
<td width="75" background="../images/bar_1.jpg" align="center" onMouseOver="this.background='../images/bar_2.jpg'" onMouseOut="this.background='../images/bar_1.jpg'"> <a href="#" target="_self">新闻</a> </td>
新 闻 | 财 经 | 娱 乐 | 影 视 | 音 乐 |
javaScrip 图片基本特效
鼠标感应半透明图片
通过鼠标的onMouseOver(鼠标经过)事件和onMouseOut(鼠标离开)事件改变图片的透明可见度
平时半透明的模糊图片,鼠标放上就完全显示,共2步
1) 将以下代码加入HTML的<head></head>之间:
<script language="JavaScript1.2"> function makevisible(cur,which){ if (which==0) cur.filters.alpha.opacity=100 else cur.filters.alpha.opacity=20 } </script>
2) 将以下代码加入到HTML的<body><body>之间:
<img src="http://www.01itcn.com/logo/01itcn.gif" style="filter:alpha(opacity=20)" onMouseOver="makevisible(this,0)" onMouseOut="makevisible(this,1)">
效果演示
图片渐现效果
在<head>区域中加入如下代码
<Script For=window Event=onLoad Language=vbScript> image1.filters.item(0).apply() image1.filters.item(0).Transition = 22 image1.Style.visibility = "" image1.filters(0).play(2.0) </Script>
在<body>区域中加入如下代码
<img src="http://newgo.01itcn.com/01itcn/images/3.jpg" border="1" id="image1" style="visibility:hidden; Filter:revealTrans(Duration=4.0, Transition=22);">
备注:代码中 Transition = 22 ,可取值 0-23 分别产生不同的渐现效果,若值超出22则会产生随机效果
0 = 盒状收缩 | 1 = 盒状放射 | 2 = 圆形收缩 | 3 = 圆形放射 |
4 = 由下往上 | 5 = 由上往下 | 6 = 从左至右 | 7 = 从右至左 |
8 = 垂直百叶窗 | 9 = 水平百叶窗 | 10 = 水平格状百叶窗 | 11 = 垂直格状百叶窗 |
12 = 随意溶解 | 13 = 从左右两端向中间展开 | 14 = 从中间向左右两端展开 | 15 = 从上下两端向中间展开 |
16 = 从中间向上下两端展开 | 17 = 从右上角向左下角展开 | 18 = 从右下角向左上角展开 | 19 = 从左上角向右下角展开 |
20 = 从左下角向右上角展开 | 21 = 水平线状展开 | 22 = 垂直线状展开 | 23 = 随机产生一种过渡方式 |
javaScrip 按钮基本事件
window.external...
<input οnclick='window.external.ImportExportFavorites(true,"http://localhost");' type=button value=导入收藏夹> <input οnclick='window.external.ImportExportFavorites(false,"http://localhost");' type=button value=导出收藏夹> <input οnclick="window.external.ShowBrowserUI('OrganizeFavorites', null)" type=button value=整理收藏夹> <input οnclick="window.external.ShowBrowserUI('LanguageDialog', null)" type=button value=语言设置> <input οnclick="window.external.AddFavorite('http://blog.youkuaiyun.com/Opossum/', '学习,讨论')" type=button value=加入收藏夹> <input οnclick="window.external.addChannel('http://blog.youkuaiyun.com/Opossum/')" type=button value=加入到频道>
window.location...
<INPUT οnclick=window.location.reload() type=button value=刷新 name=refresh> <INPUT οnclick='window.location="view-source:" + window.location.href' type=button value=查看源文件 name=viewButton>
document.execCommand...
<input οnclick="document.execCommand('Cut')" type=button value=剪切> <input οnclick="document.execCommand('Copy')" type=button value=拷贝> <input οnclick="document.execCommand('Paste')" type=button value=粘贴> <input οnclick="document.execCommand('Undo')" type=button value=撤消> <input οnclick="document.execCommand('Delete')" type=button value=删除> <input οnclick="document.execCommand('Bold')" type=button value=黑体> <input οnclick="document.execCommand('Italic')" type=button value=斜体> <input οnclick="document.execCommand('Underline')" type=button value=下划线> <input οnclick="document.execCommand('stop')" type=button value=停止> <input οnclick="document.execCommand('SaveAs')" type=button value=保存> <input οnclick="document.execCommand('Saveas',false,'c:\\test.htm')" type=button value=另存为> <input οnclick="document.execCommand('FontName',false,fn)" type=button value=字体> <input οnclick="document.execCommand('FontSize',false,fs)" type=button value=字体大小> <input οnclick="document.execCommand('refresh',false,0)" type=button value=刷新>
history.go
<a href="javascript:history.go(-1)">点击后退</a> <input type="button" name="button" οnclick=history.go(1) value="前进"> <input type="button" name="button" οnclick=history.go(-1) value="后退"> <input type="button" name="button" οnclick=history.forward() value="前进"> <input type="button" name="button" οnclick=history.back() value="后退">
回到首页
<input type="button" name="button" OnClick="top.location.href='index.html'" value="回到首页">
按钮的超链接
<input type="button" name="button" value="按钮" οnclick="window.open('http://www.01itcn.com','_blank')"> <input type="button" name="button" value="麟妖软圃" οnclick="location.href='http://www.01itcn.com'">
javaScrip 居顶部的浮动面版
<script language="javascript"> <!-- Begin function setVariables() { if (navigator.appName == "Netscape") { v=".top="; dS="document."; sD=""; y="window.pageYOffset"; } else { v=".pixelTop="; dS=""; sD=".style"; y="document.body.scrollTop"; } } function checkLocation() { object="object1"; yy=eval(y)+30; eval(dS+object+sD+v+yy); setTimeout("checkLocation()",10); } End --> </script>
<body OnLoad="setVariables();checkLocation()"> <span id="object1" style="position:absolute; visibility:show; left:10px; top:0px"> <table width="80" border="0" cellpadding="3" cellspacing="3" bgcolor="#FFCC99"> <tr> <td><a href="#" target="_self">首页</a></td> </tr> <tr> <td><a href="#" target="_self">新闻</a></td> </tr> <tr> <td><a href="#" target="_self">娱乐</a></td> </tr> <tr> <td><a href="#" target="_self">财经</a></td> </tr> <tr> <td><a href="#" target="_self">军事</a></td> </tr> <tr> <td><a href="#" target="_self">生活</a></td> </tr> </table> </span>
居底部的浮动面版
<script language="javascript"> <!-- Begin function stat(){ var a = pageYOffset+window.innerHeight-document.bar.document.height-15 document.bar.top = a setTimeout('stat()',2) } function fix(){ nome=navigator.appName if(nome=='Netscape'){ stat() } else{ var a=document.body.scrollTop+document.body.clientHeight-document.all.bar.offsetHeight-30 bar.style.top = a } } End--> </script>
<body onLoad='fix()' onScroll="fix()" onResize="fix()"> <span id="bar" style="position:absolute; left:10px; top:0px" > <table width="80" border="0" cellpadding="3" cellspacing="3" bgcolor="#FFCC99"> <tr> <td><a href="#" target="_self">首页</a></td> </tr> <tr> <td><a href="#" target="_self">新闻</a></td> </tr> <tr> <td><a href="#" target="_self">娱乐</a></td> </tr> <tr> <td><a href="#" target="_self">财经</a></td> </tr> <tr> <td><a href="#" target="_self">军事</a></td> </tr> <tr> <td><a href="#" target="_self">生活</a></td> </tr> </table> </span>
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Dreamweaver 事件简述 | |
事件 | 简述 |
onAbort | 当访问者中断浏览器正在载入图像的操作时产生。 |
onAfterUpdate | 当网页中bound(边界)数据元素已经完成源数据的更新时产生该事件。 |
onBeforeUpdate | 当网页中bound(边界)数据元素已经改变并且就要和访问者失去交互时产生该事件。 |
onBlur | 当指定元素不再被访问者交互时产生。 |
onBounce | 当marquee(选取框)中的内容移动到该选取框边界时产生。 |
onChange | 当访问者改变网页中的某个值时产生。 |
onClick | 当访问者在指定的元素上单击时产生。 |
onDblClick | 当访问者在指定的元素上双击时产生。 |
onError | 当浏览器在网页或图像载入产生错位时产生。 |
onFinish | 当marquee(选取框)中的内容完成一次循环时产生。 |
onFocus | 当指定元素被访问者交互时产生。 |
onHelp | 当访问者单击浏览器的Help(帮助)按钮或选择浏览器菜单中的Help(帮助)菜单项时产生。 |
onKeyDown | 当按下任意键的同时产生。 |
onKeyPress | 当按下和松开任意键时产生。此事件相当于把onKeyDown和onKeyUp这两事件合在一起。 |
onKeyUp | 当按下的键松开时产生。 |
onLoad | 当一图像或网页载入完成时产生。 |
onMouseDown | 当访问者按下鼠标时产生。 |
onMouseMove | 当访问者将鼠标在指定元素上移动时产生。 |
onMouseOut | 当鼠标从指定元素上移开时产生。 |
onMouseOver | 当鼠标第一次移动到指定元素时产生。 |
onMouseUp | 当鼠标弹起时产生。 |
onMove | 当窗体或框架移动时产生。 |
onReadyStateChange | 当指定元素的状态改变时产生。 |
onReset | 当表单内容被重新设置为缺省值时产生。 |
onResize | 当访问者调整浏览器或框架大小时产生。 |
onRowEnter | 当bound(边界)数据源的当前记录指针已经改变时产生。 |
onRowExit | 当bound(边界)数据源的当前记录指针将要改变时产生。 |
onScroll | 当访问者使用滚动条向上或向下滚动时产生。 |
onSelect | 当访问者选择文本框中的文本时产生。 |
onStart | 当Marquee(选取框)元素中的内容开始循环时产生。 |
onSubmit | 当访问者提交表格时产生。 |
onUnload | 当访问者离开网页时产生。 |
<div id=demo style="OVERFLOW: hidden; WIDTH: 720px; HEIGHT: 125px"> <table border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td id=demo1 vAlign=top> <table width="720" height="125" border="0" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF"> <tr> <!----- 滚动图片区域 开始-----> <td> <a href="http://newgo.01itcn.com" target=_blank> <img src="../images/marquee2-01.jpg" width="180" height="125" border="0"></a> </td> <td> <a href="http://newgo.01itcn.com" target=_blank> <img src="../images/marquee2-02.jpg" width="180" height="125" border="0"></a> </td> <td> <a href="http://newgo.01itcn.com" target=_blank> <img src="../images/marquee2-03.jpg" width="180" height="125" border="0"></a> </td> <td> <a href="http://newgo.01itcn.com" target=_blank> <img src="../images/marquee2-04.jpg" width="180" height="125" border="0"></a> </td> <td> <a href="http://newgo.01itcn.com" target=_blank> <img src="../images/marquee2-05.jpg" width="180" height="125" border="0"></a> </td> <td> <a href="http://newgo.01itcn.com" target=_blank> <img src="../images/marquee2-06.jpg" width="180" height="125" border="0"></a> </td> <!----- 滚动图片区域 结束-----> </tr> </table> </td> <td width="1" id=demo2></td> <SCRIPT> var speed1=5 demo2.innerHTML=demo1.innerHTML function Marquee1(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var MyMar1=setInterval(Marquee1,speed1) demo.οnmοuseοver=function() {clearInterval(MyMar1)} demo.οnmοuseοut=function() {MyMar1=setInterval(Marquee1,speed1)} </SCRIPT> </tr> </table> </div>
效果演示
javaScrip Marquee滚动效果
图片无缝滚动代码属性:
以下代码根据自己需要加以改动即可: 1、向上滚动代码: <base href="http://www.2ptown.com"> <div id=demo style=overflow:hidden; height:100; width:90; background:#ffffff; color:#ffffff> <div id=demo1> <img src="1.gif"> <img src="2.gif"> <img src="3.gif"> <img src="4.gif"> <img src="5.gif"> …… </div> <div id=demo2></div> </div> <script> var speed=30 demo2.innerHTML=demo1.innerHTML file://克隆demo1为demo2 function Marquee(){ if(demo2.offsetTop-demo.scrollTop<=0) file://当滚动至demo1与demo2交界时 demo.scrollTop-=demo1.offsetHeight file://demo跳到最顶端 else{ demo.scrollTop++ } } var MyMar=setInterval(Marquee,speed) file://设置定时器 demo.οnmοuseοver=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的 demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器 </script> 2、向右滚动代码: <base href="http://www.2ptown.com"> <div id=demo style=overflow:hidden; height:33; width:500; background:#ffffff;color:#ffffff> <table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top> <img src="1.gif"> <img src="2.gif"> <img src="3.gif"> <img src="4.gif"> <img src="5.gif"> …… </td><td id=demo2 valign=top></td></tr></table></div> <script> var speed=30 demo2.innerHTML=demo1.innerHTML demo.scrollLeft=demo.scrollWidth function Marquee(){ if(demo.scrollLeft<=0) demo.scrollLeft+=demo2.offsetWidth else{ demo.scrollLeft-- } } var MyMar=setInterval(Marquee,speed) demo.οnmοuseοver=function() {clearInterval(MyMar)} demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} </script> 关键的二句代码是 οnmοuseοver=this.stop() οnmοuseοut=this.start() 字的飞行鼠标放上去停止滚动代码 <marquee οnmοuseοver=this.stop() οnmοuseοut=this.start()>你要加的内容</marquee>插入超连接带图片滚动鼠标放上去停止滚动代码 <marquee behavior="scroll" direction="up" width="120" height="40" scrollamount="1" scrolldelay="38" οnmοuseοver="this.stop()"οnmοuseοut="this.start()"> <a target="cont" href="你的网址"><img src="图片地址" width="120" height="30" border="0"></a> <a target="cont" href="你的网址"><img src="图片地址" width="120" height="30" border="0"></a> <a target="cont" href="你的网址"><img src="图片地址" width="120" height="30" border="0"></a> </marquee>
|
一般而言,网页中按钮是没有声音触发事件的。如果要让按钮响应鼠标动作发出声音,我们可以写一段 javaScript脚本代码来实现。
能让按钮发出声音的脚本,不用制作flash按钮也可以实现了。
1、新建文件:DynamicAudioButton.js代码如下:
//Customize Dynamic Audio Link 自定义动态声音链接 function DynamicAudioLink(){ open("http://www.pcedu.com.cn") } //Customize Dynamic Audio Mouse Over Color 自定义动态声音mouseover颜色 function AudioOver() { document.Audio.button.style.background="#999999" document.Audio.button.style.color="white" } //Customize Dynamic Audio Mouse Down Color 自定义动态声音mousedown颜色 function AudioDown() { document.Audio.button.style.color="#cccccc" } //Customize Dynamic Audio Mouse Off Color 自定义动态声音mouseOff 颜色 function AudioOut() { document.Audio.button.style.background="#666666" document.Audio.button.style.color="#ffffff" } //Customize Dynamic Audio sound 自定义动态声音 function playHome(){ document.all.sound.src = "bleep.wav"; } document.write('<bgsound id="sound">') //Customize Button Style 自定义按钮样式 document.write('<style type="text/css">'+'<!--') document.write('.select{background:#666666;border-color:"#999999";color:"#ffffff"; font-family:Arial,Helvetica,Verdana;font-size:10pt;font-weight:bold;}'+'-->'+'</style>') document.write('<center> <form name=Audio><input class="select" name=button type="button" value="Dynamic Audio" οnclick="DynamicAudioLink()" onMouseOver="AudioOver();playHome()" onMouseDown="AudioDown()" onMouseOut="AudioOut()"></form></center>')2、保存文件后,在页面相关处插入代码引用该JS文件:
<Script language="JavaScript" SRC="DynamicAudioButton.js"></script>3、选择好音乐文件,可以是 wav、 mp3等,音乐文件尽量小些。
方法制作完成,用户可以使用图片等形式,当然也得修改DynamicAudioButton.js文件相应的代码。
javaScrip 常规数学运算示例学习加、减、乘、除运算符的使用,同时初识函数的编写、 JS和 form表单的交互
表单:
<form name="frmcalc" method="POST" οnsubmit="calc()"><p> <input type="text" name="t1" size="10" maxlength="10"> <select size="1"name="d1"> <option selected>+</option> <option>-</option> <option>×</option> <option>÷</option> </select> <input type="text" name="t2" size="10" maxlength="10"> = <input type="submit" value="提交" name="B1"></p> </form>JavaScript:
<script language="javascript"> <!-- function calc() { num1=(frmcalc.t1.value)*1; //*1确保为数值变量 num2=(frmcalc.t2.value)*1; if (frmcalc.d1.selectedIndex==0) myresult=num1+num2; if (frmcalc.d1.selectedIndex==1) myresult=num1-num2; if (frmcalc.d1.selectedIndex==2) myresult=num1*num2; if (frmcalc.d1.selectedIndex==3) myresult=num1/num2; alert ("计算结果:" + myresult); } //--> </script>演示:
表单的代码并不难理解,这里只需要注意 form的提交方式:指向我们定义的JS函数 calc(),它就是表单和 JS函数交互的关键。
calc()函数里,我们使用了三个变量:num1,num2是参与计算的变量,它们将是用户在第一个和第二个文本框里输入的数字,我们把它们都乘以1是为了确保变量是数值型的,不然会出现意外,比如1+1=11的结果是要出现的;myresult则是计算结果。函数中,我们用了if语句(如果语句)判断用户选择的运算符号,判断依据为下拉框被选中项的索引值(selectedIndex),索引值为一个数组,从0开始,0对应于加(+),1对应于减(-),2对应于乘(*),3对应于除(/)。函数的最后用上一节讲到的alert()方法把计算结果显示出来。
宣告一个函数,必须用到function,function之后是函数名,函数名后面有小角括号,括号里可有参数也可没有。函数的正文代码用大括号包含起来。
细心的朋友可能还发现,在函数calc()里,if语句用到了符号(==),这是双等号,它用于比较,而等号则用来给变量赋值
javaScrip 控制文本框中输入字数
效果演示
<script language="javascript"> <!-- Begin maxLen = 15; // max number of characters allowed function checkMaxInput(form) { if (form.message.value.length > maxLen) // if too long.... trim it! form.message.value = form.message.value.substring(0, maxLen); // otherwise, update 'characters left' counter else form.remLen.value = maxLen - form.message.value.length; } // End --> </script>
1) HTML代码
<form name="myform" action="">(最大可输入 15 个字符)<br> <textarea name="message" wrap="physical" cols="28" rows="4" onKeyDown="checkMaxInput(this.form)" onKeyUp="checkMaxInput(this.form)"></textarea> <br>你还可以输入 <input readonly type="text" name="remLen" size="3" maxlength="3" value="15"> 个字符</form>
javaScrip 立体感的文字链接
效果演示
首页 | 新闻 | 娱乐 | 军事 | 音乐 |
1) 定义CSS样式表如下:
td{ cursor:Default; font-size:12px; } .click{ border-top:1px solid #0033CC; border-bottom:1px solid #DDEEFF; border-left:1px solid #0033CC; border-right:1px solid #DDEEFF; padding-top:5px; padding-bottom:3px; padding-left:5px; padding-right:3px; } .hover{ border-top:1px solid #DDEEFF; border-bottom:1px solid #0033CC; border-left:1px solid #DDEEFF; border-right:1px solid #0033CC; padding:4px; } .normal{ border:1px solid #FFFFFF; padding:4px; }
2) 导入buttons.js文件
<script src="../common/buttons.js" language="javascript" type="text/javascript" /> </script>
2) HTML代码
<table width="360" height="36" id="button"> <tr> <a href="#" target="_self"><td width="20%" align="center" class="click">首页</td></a> <a href="#" target="_self"><td width="20%" align="center" class="normal">新闻</td></a> <a href="#" target="_self"><td width="20%" align="center" class="normal">娱乐</td></a> <a href="#" target="_self"><td width="20%" align="center" class="normal">军事</td></a> <a href="#" target="_self"><td width="20%" align="center" class="normal">音乐</td></a> </tr> </table>
2) buttons.js文件源码
function overbutton(){ if(src=event.srcElement) if(src.className=="normal"){ src.className='hover'; } } function outbutton(){ if(src=event.srcElement) if(src.className=="hover"){ src.className='normal'; } } function clickbutton(){ if(src=event.srcElement) if(src.className=="hover"){ var cells=document.all.button.rows[0].cells; for (i=0;i<cells.length ;i++ ){ cells[i].className="normal"; } src.className='click'; } } document.οnmοuseοver=overbutton document.οnmοuseοut=outbutton document.οnclick=clickbutton
javaScrip 模仿微软按钮
演示
Back Home | javaScript | CSS2 | HTML | javaWeb |
在html文档中引入coolbutton.js文件
<script language="javaScript" src="../common/coolbuttons.js"></script> <table width="600" height="32" class="coolBar"> <tr> <td width="20%" align="center" class="coolButton"> <font face="Verdana" size="2"><b>Back Home</b></font></td> <td width="20%" align="center" class="coolButton"> <font face="Verdana" size="2"><b>javaScript</b></font></td> <td width="20%" align="center" class="coolButton"> <font face="Verdana" size="2"><b>CSS2</b></font></td> <td width="20%" align="center" class="coolButton"> <font face="Verdana" size="2"><b>HTML</b></font></td> <td width="20%" align="center" class="coolButton"> <font face="Verdana" size="2"><b>javaWeb</b></font></td> </tr> </table>
coolbutton.js文件源码 File coolbutton.js Download