首页
所有分类
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 数组的for循环到底应该怎么写？
May 31 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 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
Slice(1) map(4) DFA(1) 指针(1) pygame(3) WeUI(1) linux(15) 结构体(1) random(1) 切片(1)
You might like
关于文本留言本的分页代码
2006/10/09 PHP
php巧获服务器端信息
2006/12/06 PHP
PHP类的反射用法实例
2014/11/03 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
php实现算术验证码功能
2018/12/05 PHP
jquery 分页控件实现代码
2009/11/30 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
layui表格分页 记录勾选的实例
2019/09/02 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
[02:27]2014DOTA2国际邀请赛 VG赛后采访：更大的挑战在等着我们
2014/07/13 DOTA
python如何通过protobuf实现rpc
2016/03/06 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
Python创建数字列表的示例
2019/11/28 Python
Python FFT合成波形的实例
2019/12/04 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
解决Python安装cryptography报错问题
2020/09/03 Python
python 写一个文件分发小程序
2020/12/05 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
酒店服务实习自我鉴定
2013/09/22 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
消防安全责任书
2014/04/14 职场文书
学习雷锋活动总结
2014/04/29 职场文书
质量承诺书怎么写
2014/05/24 职场文书
2014年教学工作总结
2014/11/13 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
高三毕业感言
2015/07/30 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python