分享
 
 
 

网页制作隐藏对象巧利用

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

网页制作中,通过一些隐藏对象,如隐藏IFrame、隐藏表单对象、隐藏图片的应用,通常能起到加速网页下载速度或增强网页交互功能的作用。下面笔者就通过几个实例来说明应用的方法。

一、使用隐藏图片实现图片交换效果 一般实现图片交换效果(如鼠标移入和移出或点击交换),都是通过在javascript代码中改变图片的来源属性SRC实现。其弊端是每次切换图片时都必须重新下载新图片,在图片较大或网速较慢的情形下无疑会出现等待下载的问题。有些网页编辑器如Dreamweaver中提供了预下载(Preload)的函数,但实际上据笔者在IE 6.0中测试发现并不能解决此问题。现在笔者提供一种方法,在下载网页时将要交换的图片全部下载,并将其位置设为相同(利用CSS属性)。在交换时改变图片CSS属性中的可见性属性(Visibility)为隐藏(Hidden)或可见(Visible),即可避免重新下载新图片。下面是一个鼠标移出移入交换Pic1.jpg和Pic2.jpg的实例。

function change_img(from_img,to_img){ //将from_img替换为to_img

document.images[from_img].style.visibility = "hidden";

document.images[to_img].style.visibility = "visible";

}

注意此例中块元素Span的引进是必要之步(也可用Div等替换),如果是点击交换图片则无需使用。另外,如果你不想让图片的位置固定,也可临时在javascript代码中让img2的位置等于img1的位置。

二、利用隐藏表单对象增强交互性留言板的留言区,这个留言板允许访问者选择表情符。我们假设设计者已在网页中实现了将访问者所选表情符的代号存入了全局变量Faceid中,那如何能在提交表单时将这个变量传递给服务器呢?其实只需用一个隐藏类型(Hidden)的表单对象即可解决问题。在表单部分这样书写:

在验证表单函数中这样书写:function verify() {

//此处省略了其他验证部分,即运行至此已通过其他验证

document.writer.faceid_save.value = faceid;

document.writer.submit();

}

三、隐藏IFrame在服务器交互页面中的使用在设计PHP、ASP等面向服务器的网页时,经常会涉及到服务器端数据库或文件的操作,比如说记录用户IP、网站访问量、页面链接访问量等。如果将这些操作的代码和要发给用户端的内容放在一个网页文件中,就会影响用户下载的速度,因为服务器首先要处理完这些操作代码才会将生成的页面发给访问者。特别是现在有一些虚拟机服务器,处理数据库特别慢,在这种情况下,除了避免数据库操作(如尽量使用文本文件记录信息)之外,就需另想办法。以下操作以PHP为例。下例中将针对服务器的操作代码分离出来,放入一个独立的PHP文件,如Server.php。在主页面中加入一个隐藏的内嵌页面(inner frame,IFrame,如图2:通常没有隐藏的IFrame效果),并将Server.php放入内嵌页面打开,而其他内容仍放在主页面,由于内嵌页面的下载并不会影响主页面的下载,这就提高了速度。在主页面中的具体代码只需如下书写:

同样,如果需要记录某个链接的点击量也可同样设计:

链接显示内容

总结:以上提供了3种简单使用隐藏对象的方法,实际上利用隐藏对象还能实现更多奇特的效果,比如将网页设计成Windows桌面形式,多窗口的形式就可使用隐藏IFrame实现。因此这里只能算是抛砖引玉了,大家可根据需要进行灵活应用。补充:隐藏对象还有一个功能就是美化页面。如果你的网站上有一些统计流量的代码,但是你却不希望显示出来,那么你可以将他们放在一个 div 中,然后用visibility:hidden的方法将div隐藏,这样既能统计信息又能美化页面,怎么样?

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有