js 实现菜单左右滚动显示示例介绍

代码如下:

<!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=utf-8" /> 
    <title>http://flytosky.qzone.qq.com</title> 
    <style type="text/css"> 
    *{font-family:"微软雅黑"; margin:0 auto; padding:0px;} 
    .zj_nei_l{ width:1150px; height:130px; margin-left:25px;} 
    .zj_nei_l li{ float:left; font-size:20px; color:#6f6f6f; text-align:center;margin:0px 5px; list-style:none;} 
    .show_box .left_box,.show_box .right_box{ 
        float:left; 
        height:130px; 
    } 
    .text_content p{ text-align:left; font-size:16px;  color:#fff; line-height:24px; padding:10px;} 
    .zj_nei_l li.show_box{ 
        width:98px; 
    } 
    .zj_nei_l li.show_box_hover{ 
        width:522px; 
    } 
    .show_box .right_box{ 
        display:none; 
        width:414px; 
        height:130px; 
        overflow:hidden; 
        margin-left: 10px; 
    } 
    .right_box .text_content{ 
        width:414px; 
        background-color:#339933; 
        color:#FFF; 
        height:130px; 
    } 
    .zj_nei_l .left_box{ 
        width:88px; 
        font-size:20px; 
    } 
    .zj_nei_l .left_box p{ 
        line-height:42px; 
        font-size:20px; 
    } 
    .zj_nei_l .img_box{ 
        width: 88px; 
        height:88px; 
    } 
    .show_box .item1{ 
        background:#030; 
    } 
    .show_box .item2{ 
        background:#300; 
    } 
    .show_box .item3{ 
        background:#600; 
    } 
    .show_box .item4{ 
        background:#6C0; 
    } 
    .show_box .item5{ 
        background:#6F9; 
    } 
    .show_box .item6{ 
        background:#3F9; 
    } 
    .show_box_hover .left_box{ 
        color:#339933; 
    } 
    .show_box_hover .item1{ 
        background:#0F9; 
    } 
    .show_box_hover .item2{ 
        background:#00C; 
    } 
    .show_box_hover .item3{ 
        background:#906; 
    } 
    .show_box_hover .item4{ 
        background:#9F6; 
    } 
    .show_box_hover .item5{ 
        background:#CF9; 
    } 
    .show_box_hover .item6{ 
        background:#90F; 
    } 
    </style> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    </head>

<body> 
        <div class="zj_nei_l"> 
          <ul> 
            <li class="show_box show_box_hover"> 
                <div class="left_box"> 
                    <div class="img_box item1"> 
                    </div> 
                    <p>学知识></p> 
                </div> 
                <div class="right_box" style="display:block;"> 
                    <div class="text_content"> 
                        <p>有事情请联系小白！交志同道合的朋友</p> 
                        <p>邮箱：flytosky1991@126.com</p> 
                        <p>QQ：879974693</p> 
                    </div> 
                </div> 
                <div class="clearboth"></div> 
            </li> 
            <li class="show_box"> 
                <div class="left_box"> 
                    <div class="img_box item2"></div> 
                    <p>交挚友></p> 
                </div> 
                <div class="right_box"> 
                    <div class="text_content"> 
                        <p>有事情请联系小白！交志同道合的朋友</p> 
                        <p>邮箱：flytosky1991@126.com</p> 
                        <p>QQ：879974693</p> 
                    </div> 
                </div> 
                <div class="clearboth"></div> 
            </li> 
            <li class="show_box"> 
                <div class="left_box"> 
                    <div class="img_box item3"></div> 
                    <p>能赚钱></p> 
                </div> 
                <div class="right_box"> 
                    <div class="text_content"> 
                        <p>有事情请联系小白！交志同道合的朋友</p> 
                        <p>邮箱：flytosky1991@126.com</p> 
                        <p>QQ：879974693</p> 
                    </div> 
                </div> 
                <div class="clearboth"></div> 
            </li> 
            <li class="zj_line"></li> 
            <li class="show_box"> 
                <div class="left_box"> 
                    <div class="img_box item4"></div> 
                    <p>找业务></p> 
                </div> 
                <div class="right_box"> 
                    <div class="text_content"> 
                        <p>有事情请联系小白！交志同道合的朋友</p> 
                        <p>邮箱：flytosky1991@126.com</p> 
                        <p>QQ：879974693</p> 
                    </div> 
                </div> 
                <div class="clearboth"></div> 
            </li> 
            <li class="show_box"> 
                <div class="left_box"> 
                    <div class="img_box item5"></div> 
                    <p>招人才></p> 
                </div> 
                <div class="right_box"> 
                    <div class="text_content"> 
                        <p>有事情请联系小白！交志同道合的朋友</p> 
                        <p>邮箱：flytosky1991@126.com</p> 
                        <p>QQ：879974693</p> 
                    </div> 
                </div> 
                <div class="clearboth"></div> 
            </li> 
            <li class="show_box"> 
                <div class="left_box"> 
                    <div class="img_box item6"></div> 
                    <p>求发展></p> 
                </div> 
                <div class="right_box"> 
                    <div class="text_content"> 
                        <p>有事情请联系小白！交志同道合的朋友</p> 
                        <p>邮箱：flytosky1991@126.com</p> 
                        <p>QQ：879974693</p> 
                    </div> 
                </div> 
                <div class="clearboth"></div> 
            </li> 
          </ul> 
        </div>

<script type="text/javascript"> 
        var hide_boxw = $(".right_box").width(); 
        $(".show_box").mouseenter(function(e){ 
            var li = $(this).find(".right_box"); 
            $(this).addClass("show_box_hover"); 
            if(li.css("display")=="none"){ 
                $(".right_box").hide(); 
                $(".show_box").removeClass("show_box_hover"); 
                $(this).addClass("show_box_hover"); 
                li.css({"width":"0px","display":"block"}); 
                li.animate({"width":hide_boxw},hide_boxw); 
            } 
        }); 
    </script> 
    </body> 
    </html>

实现效果

赞 (0)

相关推荐

  • JS实现随页面滚动显示/隐藏窗口固定位置元素

    JS实现随页面滚动显示/隐藏窗口固定位置元素

    窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素:当页面位置小于某高度,或者页面向上滚动时,隐藏该元素. 先给大家展示下效果图: 1.html <p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p> 2.css p#sel

  • js实现目录链接,内容跟着目录滚动显示的简单实例

    js实现目录链接,内容跟着目录滚动显示的简单实例

    如下所示: <script> require(["jquery", "bootstrap"], function($) { $(function() { $('.left').height(($('body').height() > $(window).height()) ? $('body').height() : $(window).height()); }); var goTo = $(".con"); var guide

  • js实现目录定位正文示例

    js实现目录定位正文示例

    一:先查看截图效果 1)  2)点击左侧导航栏里的目录会对应到对应的层 二:下载引进jquery-1.7.2.min.js文件 三:页面代码: 复制代码 代码如下: <pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

  • JS实现超精简的链接列表在固定区域内滚动效果代码

    JS实现超精简的链接列表在固定区域内滚动效果代码

    本文实例讲述了JS实现超精简的链接列表在固定区域内滚动效果代码.分享给大家供大家参考,具体如下: 这款超精简版的链接列表文字滚动代码,可在指定的区域内滚动,当然,区域大小可以自己设置的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-link-list-scroll-style-codes/ 具体代码如下: <html> <HEAD> <TITLE>文字链接列表滚动</TITLE> <META

  • js 实现菜单左右滚动显示示例介绍

    js 实现菜单左右滚动显示示例介绍

    复制代码 代码如下: <!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

  • js实现仿微博滚动显示信息的效果

    js实现仿微博滚动显示信息的效果

    相信大家空闲的时候都会上上微博,推特等社交网站,每次我登陆微博时,我都会留意一下它有什么变化,小的有一些布局的变化,大的有API接口的改变等. 在首页登陆微博时,我们可以看到一栏"大家正在说",它滚动显示着当前每个人发送的微博:刚看到这个效果觉得挺有趣的,所以我们将在接下来的文中介绍实现滚动显示微博信息的效果. 我们细细观察了微博的"大家正在说",它是通过由上往下滚动来实现不断显示微博的,而且每一天新微博都是通过淡入效果显示的. 图1 微博"大家正在说&q

  • JS实现图片横向滚动效果示例代码

    JS实现图片横向滚动效果示例代码

    复制代码 代码如下: <!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=&qu

  • JS中数组Array的用法示例介绍

    new Array() new Array(len) new Array([item0,[item1,[item2,...]]] 使用数组对象的方法: var objArray=new Array(); objArray.concact([item1[,item2[,....]]]-------------------将参数列表连接到objArray的后面形成一个新的数组并返回,原有数组不受影响.如:var arr=["a","b","c"];

  • js jq 单击和双击区分示例介绍

    一:原理: 先看一下点击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mouseout,click , mousedown,mouseout,click,dblclick: 在双击事件(dblclick),触发的两次单击事件(click)中,第一次的单击事件(click)会被屏蔽掉,但第二次不会.也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果

  • js 跳出页面的frameset框架示例介绍

    很多网页都是框架结构的,在很多的情况下会通过按钮点击事件或链接,跳出框架转到其它界面.例如说点击"注销登录"返回到登录界面. 一.通过运行脚本跳出框架有以下几种写法: 复制代码 代码如下: 1.<script language = javascript>window.open('Login.aspx','_top')</script>" 2.<script language = javascript>window.open('Login.a

  • js switch case default 的用法示例介绍

    复制代码 代码如下: switch(tagName){ case "span": node = element.parent().parent(); element = element; break; case "td": node = element.parent(); element = element.find("span"); break; default: node = element; break; } 以上语句等同于 if(tagN

  • JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法

    本文实例讲述了JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法.分享给大家供大家参考,具体如下: setTimeout 用于延时器,只执行一次. setInterval:用于多次执行. 项目中引用到jquery.timers-1.2.js定时器,并且MSClass做信息定期滚动,每3分钟执行一次,执行三次左右,滚动的次数越来越快,原因在于timers和MSClass都用了setInterval, 都会再次添加一个setInterval,最后导致几个setIn

  • JS简单封装的图片无缝滚动效果示例【测试可用】

    本文实例讲述了JS简单封装的图片无缝滚动效果.分享给大家供大家参考,具体如下: <!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" lang="

随机推荐