首页
所有分类
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 相关文章推荐
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
JavaScript高级程序设计（第3版）学习笔记13 ECMAScript5新特性
Oct 11 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
javascript 实现文本使用省略号替代（超出固定高度的情况）
Feb 21 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 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
Word(2) 二维码(2) openGauss(1) JDBC(3) 太阳码(1) 条码(1) 日志(1) Post(1) 延时任务(1) Eclipse(1)
You might like
php开发工具之vs2005图解
2008/01/12 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
jQuery实现判断滚动条到底部
2015/06/23 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
javascript常用的方法分享
2015/07/01 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
python实现的简单FTP上传下载文件实例
2015/06/30 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
Django实现分页功能
2018/07/02 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
Python3读写ini配置文件的示例
2020/11/06 Python
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
致跳高运动员广播稿
2014/01/13 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
学校校庆演讲稿
2014/05/22 职场文书
学术诚信承诺书
2014/05/26 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
《童年》读后感（三篇）
2019/08/27 职场文书
创业计划书之服装
2019/10/07 职场文书
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android