首页
所有分类
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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
javascript实现锁定网页、密码解锁效果（类似系统屏幕保护效果）
Aug 15 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用（七）
Jun 04 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
Vue 一键清空表单的实现方法
Feb 07 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
软件测试工程师面试题(53) PYTHON面试题(27) Oracle面试题(81) 网络工程师面试题(96) EJB面试题(46) LINUX面试题(83) 软件工程师面试题(40) Javascript面试题(44) MySQL面试题(19) C#面试题(90)
You might like
php生成excel文件的简单方法
2014/02/08 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
提高网站信任度的技巧
2008/10/17 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
JavaScript全屏和退出全屏事件总结（附代码）
2017/08/17 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
微信小程序（订阅消息）功能
2019/10/25 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
vue调用微信JSDK 扫一扫，相册等需要注意的事项
2021/01/03 Vue.js
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
Python符号计算之实现函数极限的方法
2019/07/15 Python
微信公众号token验证失败解决方案
2019/07/22 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
英国领先的亚洲旅游专家：Wendy Wu Tours
2018/01/21 全球购物
Moss Bros官网：英国排名第一的西装店
2020/02/26 全球购物
德国苹果商店：MacTrade
2020/05/18 全球购物
升职自荐信范文
2015/03/27 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers
讲解MySQL增删改操作
2022/05/06 MySQL
app场景下uniapp的扫码记录
2022/07/23 Java/Android