滑动门效果JS代码说明
分类:东莞网站制作  日期:2012-8-11  浏览:次  点击返回
标签: jQuery 网站建设基础知识 网站制作教程  文章来源:东莞网络公司

我们在上网时经常看到像163,sina这个大网站上很多切换效果,放很多内容,相当的节约页面资源,可是对于网站开发不是很了解的朋友来说,要想实现这样的效果就是一个比较头痛的问题。

这种可以切换的效果,我们称之为“滑动门效果”,是不是很形象,生动,其实要实现这个功能很简单,他的原理就是当指到引用对象上是,JS获取对象的ID值,然后执行对应的样式代码,反之没有选中的就执行另外一组样式,把内容给隐藏起来,就实现了这种很简单方便的效果。

笔者也是从刚开始的迷茫到现在的开发,非常能体验那种想要而不得的心里感受,为了广大初学者能很快找到这方面的内容,特把自己写的JS代码公布出来,供初学者使用。

function gdhfkj(obj,id)
{
 var arrayli = obj.parentNode.getElementsByTagName("a1"); //获取数组
 var arrayul = document.getElementById(id).getElementsByTagName("b1"); //获取数组
 for(i=0;i<arrayul.length;i++)
 {
 if(obj==arrayli[i])
 {
   arrayli[i].className = "s1";选中时的样式
   arrayul[i].className = "";
 }
 else
 {
   arrayli[i].className = "";
   arrayul[i].className = "s2";没选中时的样式
 }
 }
}

如果您有什么不清楚的,可来电咨询:0769-89978132


域名注册 |  企业邮箱 |  虚拟主机 |  网站设计 |  网站建设报价 |  网站推广 |  网站建设 |  联系我们 |  Sitemap

洪福科技是东莞正规网页设计公司,提供东莞建站、网络推广、企业邮箱、域名注册和虚拟主机服务,专注于中小企业网站建设和网络营销服务,共享网络开放平台!

地址:广东省东莞市鸿福东路红棉路24号  邮编:523000  电话:0769-3321 8176   传真:0769-8987 5073    邮箱:teach@gdhfkj.com

Copyright(©) 2009-2013 东莞市洪福科技有限公司 All Rights Reserved. 版权所有  粤ICP备09061858号