首页
所有分类
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 相关文章推荐
JS JavaScript获取Url参数，src属性参数
Mar 09 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围（已补全）
Aug 28 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
原生js实现轮播图特效
May 04 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
metaclass(1) XML(1) Geospatial(1) RabbitMQ(3) 数据类型(8) 触发器(3) Hash(1) Bean(3) 入门基础(1) IOC(3)
You might like
php输出xml格式字符串(用的这个)
2012/07/12 PHP
深入解析php之apc
2013/05/15 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
使用JS批量选中功能实现更改数据库中的status状态值（批量展示）
2016/11/22 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
Python编写电话薄实现增删改查功能
2016/05/07 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
python执行使用shell命令方法分享
2017/11/08 Python
浅析Python函数式编程
2018/10/06 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
屈臣氏俄罗斯在线商店：Watsons俄罗斯
2020/08/03 全球购物
教师自荐书
2013/10/08 职场文书
结婚保证书
2015/01/16 职场文书
建议书格式
2015/02/04 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python