带绿色箭头指示的滑动门DIV效果

带箭头指向的首页滑动门特效代码，而且可以很方便的在滑动和鼠标点击之间切换，代码比以前的很多滑动门都简洁，而且效果相当舒服，宽度和高度根据你网页的大小可以自己修改，要注意CSS文件内的图片路径要一并修改。

<!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=gb2312" /> <title>首页栏目切换滑动门代码站长学院pigzz.com</title> <style type="text/css"> body { font-size:9pt } #slidingBlock { width:246px;border:1px #95CF92 solid;padding:1px;over-flow:hidden } #slidingBlock h4 { float:left;width:82px;height:30px;line-height:25px;text-align:center;font-size:12px;over-flow:hidden } #slidingBlock h4.menuNo { font-weight:normal;color:#333333;background:url(http://www.codefans.net/jscss/demoimg/slidingMenuLine.gif) repeat-x } #slidingBlock h4.menuOn { font-weight:bold;color:#ffffff;background:url(http://www.codefans.net/jscss/demoimg/slidingMenu.gif) no-repeat } #slidingBlock DIV.slidingList_none { display:none } #slidingBlock DIV.slidingList { margin:0px;padding:5px;height:150px } #slidingBlock DIV.slidingList ul { margin:0px;padding:0px } #slidingBlock DIV.slidingList li { height:20px;line-height:20px } #slidingBlock DIV.slidingList li span { font-size:12px;font-weight:normal;color:#ffffff;padding-left:4px;padding-right:8px } #slidingBlock DIV.slidingList li.one { background:url(http://www.codefans.net/jscss/demoimg/slidingTag1.gif) no-repeat } #slidingBlock DIV.slidingList li.two { background:url(/jscss/demoimg/slidingTag2.gif) no-repeat } #slidingBlock DIV.slidingList li.thr { background:url(/jscss/demoimg/slidingTag3.gif) no-repeat } </style> </head> <body> <div id="slidingBlock"> <script language="javascript"> function switchmodTag(modtag,modcontent,modk) { for(i=1; i <4; i++) { if (i==modk) { document.getElementById(modtag+i).className="menuOn";document.getElementById(modcontent+i).className="slidingList";} else { document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+i).className="slidingList_none";} } } </script> <h4 class="menuOn" id="mod1" οnmοuseοver="switchmodTag('mod','slidingList','1');this.blur();"> 最近更新</h4> <h4 class="menuNo" id="mod2" οnmοuseοver="switchmodTag('mod','slidingList','2');this.blur();"> 近期推荐</h4> <h4 class="menuNo" id="mod3" οnmοuseοver="switchmodTag('mod','slidingList','3');this.blur();"> 热门点击</h4> <div class="slidingList" id="slidingList1"> <ul> <li class="one"><span>1</span><a href="/jscss/code/34.shtml" target="_blank">暖色调的下拉菜单可支持二级</a></li> <li class="one"><span>2</span><a href="/jscss/code/24.shtml" target="_blank">带倒影的图片切换（类似FLASH）</a></li> <li class="one"><span>3</span><a href="/jscss/code/44.shtml" target="_blank">纯CSS实现漂亮的分页按钮风格</a></li> </ul> </div> <div class="slidingList_none" id="slidingList2"> <ul> <li class="two"><span>1</span><a href="/">第二个的信息第二个的信息</a></li> <li class="two"><span>2</span><a href="/jscss/code/34.shtml" target="_blank">暖色调的下拉菜单可支持二级</a></li> <li class="two"><span>3</span><a href="/jscss/code/44.shtml" target="_blank">纯CSS实现漂亮的分页按钮风格</a></li> </ul> </div> <div class="slidingList_none" id="slidingList3"> <ul> <li class="thr"><span>1</span><a href="/">第三个的信息第三个的信息</a></li> <li class="thr"><span>2</span><a href="/jscss/code/24.shtml" target="_blank">带倒影的图片切换效果（类似FLASH）</a></li> <li class="thr"><span>3</span><a href="/jscss/code/44.shtml" target="_blank">纯CSS实现漂亮的分页按钮风格</a></li> </ul> </div> </div> <p>如果想要点击鼠标才切换的话，将onmouseover改成onclick即可，宽高就自己调整吧，另外改变相关图片的路径的话注意修改css样式代码的图片路径</p> </body> </html>

带绿色箭头指示的滑动门DIV效果相关推荐

滑动门套滑动门css,JS+CSS实现带小三角指引的滑动门效果
本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡, ...
很棒带阴影的JS+CSS滑动门菜单代码
代码简介: 绝对值得一看的CSS滑动门,因为它在鼠标放上后自动弹出一个带阴影的层,无操作的情况下层会自动隐藏,这样更节省网页布局,而且它的风格也很清新,淘宝网有这种效果,没有用到任何修饰图片,绝对不容 ...
使用JS实现选项卡和滑动门的效果
使用JS实现选项卡和滑动门的效果什么是选项卡和滑动门??见下图: 怎么实现呢,下面我来教你方法1:使用在button里的onclick方法change实现 <!DOCTYPE html> ...
css的滑动门效果,JS+CSS实现简易实用的滑动门菜单效果
本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希 ...
[原创+源码]超简单：基于jQuery实现的选项卡（滑动门）效果
上篇文章给大家详细的介绍了,如何使用jQuery实现弹出各种窗口效果,引起了很多朋友们得反响,今天再次给大家奉献一篇的新的基于jQuery实现的 "滑动门"(跟随鼠标滑动滑动的ta ...
latex 箭头上带_LaTeX技巧931: 让你的公式带上箭头指示
宏包witharrows提供了一种数学环境,该数学环境与amsmath(和mathtools)中aligned环境很相似,可以实现过长的多段公式换行并对齐.除此之外,在该环境下还可以在公式中的右侧添加 ...
原生JavaScript实现滑动门效果
一.什么是滑动门首先你要了解什么是滑动门. 生活中我们经常看到一些网站或是商城有一些滑动门的效果, 那么怎么实现一个简单的滑动门的网页特效呢?下面简单分享一下方法, 二.实现滑动门所需技术简单的H ...
CSS 实例系列 - 01 - Tab 滑动门
Hello 小伙伴们早上.中午.下午.晚上和深夜好,这里是 jsliang~ 本 CSS 系列文章: 主推学以致用.结合面试题和工作实例,让小伙伴们深入体验 61 个工作常见的 CSS 属性和各种 C ...
用CSS实现“滑动门”技术
在前几天无意中翻看网页代码的过程中,无意中发现了微信官网的nav里有一个很有意思的小细节.在跟着代码学习了一番,在网上阅读了相关资料,原来这就是传说中的滑动门技术. 接下来就来分享一下我个人对滑动门的 ...

带绿色箭头指示的滑动门DIV效果

带绿色箭头指示的滑动门DIV效果相关推荐

最新文章

热门文章