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

发布时间：2018-09-11 19:45:23 所属栏目：专访来源：站长网

导读：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>
提示：可修改后代码再运行!

（编辑：威海站长网）

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