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

最新推荐文章于 2023-06-13 22:28:24 发布

转载最新推荐文章于 2023-06-13 22:28:24 发布 · 2.5k 阅读

文章标签：

#div #class #css #url #xhtml #javascript

web页面设计专栏收录该内容

80 篇文章

订阅专栏

本文提供了一段简洁且实用的首页滑动门特效代码，该代码支持通过滑动或鼠标点击来切换不同的内容模块，并且可以根据网页尺寸调整宽度和高度。

带箭头指向的首页滑动门特效代码，而且可以很方便的在滑动和鼠标点击之间切换，代码比以前的很多滑动门都简洁，而且效果相当舒服，宽度和高度根据你网页的大小可以自己修改，要注意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" onmouseover="switchmodTag('mod','slidingList','1');this.blur();">
    最近更新</h4>
    <h4 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','slidingList','2');this.blur();">
    近期推荐</h4>
    <h4 class="menuNo" id="mod3" onmouseover="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>