切换演示的地方有很多:
比如腾讯每天给大家弹出的新闻窗口,也可以在一个小说网站左上角找到。

其实实现起来并不难,但都是需要IE下才可以,用到两个:
1 js做内容显示的控制
2 控制IE提供的滤镜

对于内容控制,拿三个板块切换的来说,一般可以做三个板块的内容,想切换效果好一点,当然要外观都一样,只是内容不一样,这样看起来就很舒服,不会太突兀。

最主要的方法是css样式里面的 display:none; ,它可以让一个标签内的内容不占空间,所以,我们三个板块就可以让一个显示,另外两个是none。

#tabs {width:100%;filter:progid:DXImageTransform.Microsoft.Fade(Overlap=0.5,Duration=0.5);}
#tab1 {display:block;}
#tab2 {display:none;}
#tab3 {display:none;}


这样是让第一个显示,另外两个隐藏,然后再控制切换。


function $(obj){
return document.getElementById(obj);
}
function show_tab(n){
$("tabs").filters[0].Apply();
for(var i=1;i<=num;i++){
if(i==n){
$("tab"+i).style.display="block";
}else{
$("tab"+i).style.display="none";
}
}
$("tabs").filters[0].Play();
}


主要代码列举了,下面看看演示的网址:
http://www.aslibra.com/down/tab_show.htm

很简单是不是?
注意控制滤镜的时间哦:Overlap=0.5,Duration=0.5
这里是控制时间的,切换的时候是有一个自身的淡化,后一个界面的渐现,中间有一个叠加的机会
Overlap就是控制叠加呈现的时间,Duration顾名思义就是整个过程的时间了。



原创内容如转载请注明:来自 阿权的书房
收藏本文到网摘
宝贝儿
2008/11/12 15:19
zan救急的东东哦love
xj Homepage Email
2007/09/13 14:47
你好,看到这个切换代码仍然不十分清楚怎样使用。我想要在文章单独页面中切换显示最新文章和热门文章,应该怎样填入代码呢?wordpress博客。可以的话最好回复我邮件:blogxj@gmail.com。因为评论回复容易被忽视。多谢了。
hqlulu 回复于 2007/09/13 21:26
wordpress估计也不容易处理,你会html语法你就可以处理,会的话应该也看的懂了,可以尝试一下啊 ^_^
分页: 1/1 第一页 1 最后页
发表评论
AD
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML 打开UBB 打开表情 隐藏
昵称   密码   游客无需密码
网址   电邮   [注册]
               

 

阅读推荐

服务器相关推荐

开发相关推荐

应用软件推荐