js 滑动门,CSS 实现小箭头指向地区内容

发布时间：2018-08-20 10:02:38 所属栏目：访谈来源：站长网

导读：CSS滑动门代码保举：带小三角指引的滑动门，有伴侣说在IE6下看不到结果，着实能看到，由于谁人小三角颜色较量淡，偶然辰因表现器的缘故起因看不太清，其拭魅这个颜色是本身可以节制的，改一下就行了，带三角指引后，使整个滑动门的布局更清淅，导向性更公道。点

　　CSS滑动门代码保举：带小三角指引的滑动门，有伴侣说在IE6下看不到结果，着实能看到，由于谁人小三角颜色较量淡，偶然辰因表现器的缘故起因看不太清，其拭魅这个颜色是本身可以节制的，改一下就行了，带三角指引后，使整个滑动门的布局更清淅，导向性更公道。

　　点击结果：猛击这里

　　运行结果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>js滑动门 - Liehuo.Net</title> <style type="text/css"> *{ margin:0; padding:0; font-size:12px;} body{ padding:30px; } .tabsBox{ width:400px; margin:20px auto;} .tabs{ height:20px;} .tabs li{ width:80px; text-align:center; padding-top:2px; line-height:18px; float:left; background-color:#ccc; margin-right:5px; list-style:none; position:relative; cursor:pointer; color:#333;} .tabs li span{ display:none;} .tabs .cur{ background-color:#f0f0f0;} .tabs .cur span{ display:block; width:1px; height:1px; border:solid 8px; border-color:#f0f0f0 #fff #fff #fff; position:absolute; top:20px; left:32px; overflow:hidden; z-index:-1;} .cons{ height:120px; padding:8px 12px; overflow:hidden; border:1px solid #f0f0f0; position:relative; z-index:1;} .cons ul li{ list-style:none; line-height:20px;} .hidden{ display:none;} .block{ display:block;} </style> </head> <body> <div class="tabsBox"> <ul id="Tabs" class="tabs"> <li class="cur">最新更新<span></span></li> <li>保举下载<span></span></li> <li>下载排行<span></span></li> <li>本月排行<span></span></li> </ul> <div id="TabsCon" class="cons"> <ul> <LI><A title=横向带搁浅r的图片转动,script+marquee实现 href="/a/view/16705.html">横向带搁浅r的图片转动,script+marquee</A> </LI> <LI><A title=基于<b>jQuery</b>+Css计划的评述盖楼结果代码 href="/a/view/17146.html">基于jQuery+Css计划的评述盖楼结果代码</A> </LI> <LI><A title=点击弹出div圆角的遮罩层,可封锁可移动 href="/a/view/15766.html">点击弹出div圆角的遮罩层,可封锁可移动</A> </LI> <LI><A title=仿Flash幻灯带缓冲的核心图切换轮播(玄色气魄威风凛凛) href="/a/view/16707.html">仿Flash幻灯带缓冲的核心图切换轮播(黑</A> </LI> <LI><A title="javascript 消息幻灯片代码,带有动画结果" href="/a/view/16865.html">javascript 消息幻灯片代码,带有动画效</A> </LI> <LI><A title=跟从屏幕转动的DIV层与牢靠不动的DIV层 href="/a/view/15979.html">跟从屏幕转动的DIV层与牢靠不动的DIV层</A> </LI></ul> <ul> <LI><A title=弹出遮罩DIV层实例,基于jQuery编写殊效 href="/a/view/16218.html">弹出遮罩DIV层实例,基于jQuery编写殊效</A> </LI> <LI><A title=用JS模仿2010上海世博网站Flash幻灯切换结果 href="/a/view/16650.html">用JS模仿2010上海世博网站Flash幻灯切</A> </LI> <LI><A title=跟从屏幕转动的DIV层与牢靠不动的DIV层 href="/a/view/15979.html">跟从屏幕转动的DIV层与牢靠不动的DIV层</A> </LI> <LI><A title=鼠标放在笔墨链接上，表现图片的结果代码 href="/a/view/16270.html">鼠标放在笔墨链接上，表现图片的结果代</A> </LI> <LI><A title=滑动门式的图片轮播切换结果,JS+CSS实现 href="/a/view/16706.html">滑动门式的图片轮播切换结果,JS+CSS实</A> </LI> <LI><A title="javascript 消息幻灯片代码,带有动画结果" href="/a/view/16865.html">javascript 消息幻灯片代码,带有动画效</A> </LI> </ul> <ul> <LI><A title=点击弹出div圆角的遮罩层,可封锁可移动 href="/a/view/15766.html">点击弹出div圆角的遮罩层,可封锁可移动</A> </LI> <LI><A title=仿Flash幻灯带缓冲的核心图切换轮播(玄色气魄威风凛凛) href="/a/view/16707.html">仿Flash幻灯带缓冲的核心图切换轮播(黑</A> </LI> <LI><A title=横向带搁浅r的图片转动,script+marquee实现 href="/a/view/16705.html">横向带搁浅r的图片转动,script+marquee</A> </LI> <LI><A title=基于jQuery+Css计划的评述盖楼结果代码 href="/a/view/17146.html">基于jQuery+Css计划的评述盖楼结果代码</A> </LI> <LI><A title="javascript 消息幻灯片代码,带有动画结果" href="/a/view/16865.html">javascript 消息幻灯片代码,带有动画效</A> </LI> <LI><A title=跟从屏幕转动的DIV层与牢靠不动的DIV层 href="/a/view/15979.html">跟从屏幕转动的DIV层与牢靠不动的DIV层</A> </LI></ul> <ul> <LI><A title=弹出遮罩DIV层实例,基于jQuery编写殊效 href="/a/view/16218.html">弹出遮罩DIV层实例,基于jQuery编写殊效</A> </LI> <LI><A title=用JS模仿2010上海世博网站Flash幻灯切换结果 href="/a/view/16650.html">用JS模仿2010上海世博网站Flash幻灯切</A> </LI> <LI><A title=滑动门式的图片轮播切换结果,JS+CSS实现 href="/a/view/16706.html">滑动门式的图片轮播切换结果,JS+CSS实</A> </LI> <LI><A title="javascript 消息幻灯片代码,带有动画结果" href="/a/view/16865.html">javascript 消息幻灯片代码,带有动画效</A> </LI> <LI><A title=跟从屏幕转动的DIV层与牢靠不动的DIV层 href="/a/view/15979.html">跟从屏幕转动的DIV层与牢靠不动的DIV层</A> </LI> <LI><A title=鼠标放在笔墨链接上，表现图片的结果代码 href="/a/view/16270.html">鼠标放在笔墨链接上，表现图片的结果代</A> </LI> </ul> </div> </div> <script type="text/javascript"> var lis = document.getElementById("Tabs").getElementsByTagName("li"); var uls = document.getElementById("TabsCon").getElementsByTagName("ul"); var order = 0; for(var i=0; i<lis.length; i++){ lis[i].value = i; lis[i].onmouseover = function(){ ChangeTabs(this.value); }; uls[i].className = "hidden"; } lis[order].className = "cur"; uls[order].className = "block"; function ChangeTabs(nowTab){ lis[order].className = ""; uls[order].className = "hidden"; order = nowTab lis[nowTab].className = "cur"; uls[nowTab].className = "block"; } </script> </body> </html> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!