教程三
相信您已经对JavaScript有所掌握,现在我们用一些小技巧把文本给隐藏起来或将隐藏的文本给显示出来,您一定会喜欢这些小技巧的。这次我们用一个新的style属性--display,它的值可以是""(或null)和"none"。请看例9。
例9 隐藏和显示文本
<html> <head> <title>DHtml举例9</title> <style><!-- body {font-family:"宋体";font-size:9pt} .gray {color:gray} .blue {color:blue} --> </style> <scriptlanguage="JavaScript"> function change() { if(Ques.style.display == "none") { Answ.style.display = "none"; Ques.style.display = ""; } else { Answ.style.display = ""; Ques.style.display = "none"; } } document.onclick=change; </script> <body> <ul> <liid="Ques"class="gray"style="display:''">请您点击,OK? <liid="Answ"class="blue"style="display:'none'">哈哈,我变了,请您再点击。 </ul> </body> </html>
此例中,文本将在您点击以后改变颜色和内容,奇妙吧。display=""或"null"是显示文本,而display="none"时是显示文本,上边的代码对您来说应该多能读懂,我就不多作解释了。今后的教程中我可能会讲解得比较少或者讲解得不太详细,大部分是用例子种的注释语句来说明,在此请读者多多谅解。下面的例子能产生闪烁滚动和颜色变换效果。
例11 闪烁滚动和颜色变换效果
<html> <head> <title>DHtml举例10</title> <style><!-- body {font-family:"宋体";font-size:9pt} .blue {color:blue} .red {color:red} --> </style> <scriptlanguage="JavaScript"> var flag=0; //定义变量flag, function disappear() { var dx=window.event.srcElement;//定义变量dx为对象window.event.srcElement var i,j; //定义循环变量 for(i=0;i<=1000;i++){for(j=0;j<=200;j++);}//利用循环来延长执行的时间,读者可以通过改变1000和200这两个数字来调节变化速度 dx.style.display = "none"; }//function function appear() { var dx=window.event.srcElement;//定义变量dx为对象window.event.srcElement var i,j; //定义循环变量 for(i=0;i<=1000;i++){for(j=0;j<=200;j++);}//利用循环来延长执行的时间 dx.style.display = ""; if(flag==1) //利用变量flag来改变显示文本的样式类 { flag=0; dx.className="red";} else { flag=1; dx.className="blue";}//if }//function </script> <body> <p>请您在以下各行之间移动鼠标……</p> <br> <ul> <liclass="blue"style="display:''"onmouseover="disappear()"onmouseout="appear()">AC 米 兰 <liclass="blue"style="display:''"onmouseover="disappear()"onmouseout="appear()">国 际 米 兰 <liclass="blue"style="display:''"onmouseover="disappear()"onmouseout="appear()">尤 文 图 斯 <liclass="blue"style="display:''"onmouseover="disappear()"onmouseout="appear()">佛 罗 伦 萨 <liclass="blue"style="display:''"onmouseover="disappear()"onmouseout="appear()">桑 普 多 利 亚 <liclass="blue"style="display:''"onmouseover="disappear()"onmouseout="appear()">拉 齐 奥 </ul> </body> </html>
下边我为您举了一个我比较常用的设计网页的方法。重点在于定义表格和链结的样式,并使用表格来控制文本输出。
例11 网页中常用的动态链结设计
<html> <head> <title>DHtml举例11</title> <style><!-- table {font-family:"宋体";font-size:9pt} a:link {color:white;text-decoration:none} a:visited {color:white;text-decoration:none} a:hover {color:yellow;text-decoration:underline} --> </style> </head> <body> <tableborder="0"width="18%"bgcolor="#930000"cellspacing="6"> <tr> <tdwidth="100%"><ahref="http://www.bianceng.cn/Programming/">编程语言</a></td> </tr> <tr> <tdwidth="100%"><ahref="http://www.bianceng.cn/webkf/">web开发</a></td> </tr> <tr> <tdwidth="100%"><ahref="http://www.bianceng.cn/database/">数据库</a></td> </tr> <tr> <tdwidth="100%"><ahref="http://club.bianceng.cn">学编程论坛</a></td> </tr> </table> </body> </html>
a:link是定义链结部分(即语句<a href="……">……</a>)有链结时的文本样式;a:visited是定义访问过的链结部分的文本样式;a:hover是定义鼠标移到链结部分上边时文本的样式。千万要记住这三个有关链结的样式定义的定义顺序,否则将得不到想要的效果。
一、推荐使用迅雷或快车等多线程下载软件下载本站资源。
二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。
三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!
四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.
五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。
六、如需转载本站资源,请注明转载来自并附带链接
七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com
- 1尚硅谷前端学科全套视频[AVI][130.72GB]
- 2深入理解php:高级技巧、面向对象与核心技术(原书第3版) 【PDF】
- 3开发高质量PHP框架与应用的实际案例解析【PDF】
- 4响应式Web图形设计 ([美]Christopher Schmitt) 中文【PDF】
- 5响应式Web设计:HTML5和CSS3实践指南【PDF】
- 6响应式Web设计:HTML5和CSS3实战 第2版 (本·弗莱恩) 中文【PDF】
- 7Axure RP8 实战手册 网站和APP原型制作案例精粹(小楼一夜听春语) 试读版【PDF】【15.4MB】
- 8[马上学Android]安卓开发视频教程
- 9Android开发视频教程
- 10PHP100视频教程
- 1Java编程思想On Java 8[PDF][中文][英文][源码][15.31MB]
- 2PostgreSQL实战 (谭峰等著)【PDF】【221.29MB】
- 3【机器学习】菜菜的sklearn课堂(1-12全课)[PDF][源码][157.45MB]
- 4UNREAL ENGINE 4蓝图完全学习教程[PDF][66.67MB]
- 5加密与解密(第4版)[PDF][光盘源码][1.15GB]
- 6Qt 5.9 C++开发指南[PDF][276.26MB]
- 7Python数据分析与应用PPT、教案、实训数据、习题答案[PPT][142.49MB]
- 8数据中台:让数据用起来[PDF][12.80MB]
- 9计算机网络:自顶向下方法(第7版) 【PDF】【英文】【17.46MB】
- 10大话5G:走进万物互联新时代【PDF】【37.31MB】