首页
所有分类
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 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
javascript中常用编程知识
Apr 08 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
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
小喇叭(1) 增删查改(1) #{}(1) IC-R9500(1) 外键(1) 小喇叭开始广播了(1) S-2000(1) SQL注入(2) 脏读(2) 克隆(1)
You might like
PHP中for循环语句的几种变型
2006/11/26 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
JS获取父节点方法
2009/08/20 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
[02:50]【扭转乾坤，只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
python实现爬虫下载漫画示例
2014/02/16 Python
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
Python制作爬虫采集小说
2015/10/25 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
常见的软件开发流程有哪些
2015/11/14 面试题
消防安全管理制度
2014/02/01 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
护士实习自荐信
2015/03/06 职场文书
基层党支部承诺书
2015/04/30 职场文书
爱国影片观后感
2015/06/18 职场文书
python中如何对多变量连续赋值
2021/06/03 Python
详解Python中的进程和线程
2021/06/23 Python