首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onNovember 21, 2013 
    <!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> 

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
js处理表格对table进行修饰
May 26 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
Echarts如何重新渲染实例详解
May 30 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 #Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 #Javascript
js 实现菜单上下显示附效果图
Nov 21 #Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 #Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 #Javascript
js获取对象为null的解决方法
Nov 21 #Javascript
tangram框架响应式加载图片方法
Nov 21 #Javascript
DNA(2) moviepy(1) iOS16(1) iOS(1) compose(3) RNA(2) iPhone(1) 陨石(1) Athens(1) iOS15(1)
You might like
php中的一个中文字符串截取函数
2007/02/14 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
django框架中间件原理与用法详解
2019/12/10 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
Pandas的Apply函数具体使用
2020/07/21 Python
通过代码实例了解Python异常本质
2020/09/16 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
美国诺德斯特龙百货官网：Nordstrom
2016/08/23 全球购物
英国豪华文具和皮具配件经典老品牌：Smythson（斯迈森）
2018/04/19 全球购物
Web Service面试题：如何搭建Axis2的开发环境
2012/06/20 面试题
毕业生找工作推荐信
2013/11/21 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
转让协议书范本
2014/09/13 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
商务邀请函
2015/01/30 职场文书
职位证明模板
2015/06/23 职场文书
UNION CREATIVE《Re：从零开始的异世界生活》雷姆手办
2022/03/20 日漫