首页
所有分类
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 相关文章推荐
javascript为按钮注册回车事件（设置默认按钮）的方法
May 09 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】
May 14 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
详解Vue的异步更新实现原理
Dec 22 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
MapReduce(1) pygame(3) JSON(10) Normal From(1) linux(15) Qlabel(1) pycharm(6) css3 (2) DFA(1) pyqt5(3)
You might like
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读（三）
2014/06/23 PHP
php中error与exception的区别及应用
2014/07/28 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
javascript prototype 原型链
2009/03/12 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
JavaScript获取短信验证码（周期性）
2016/12/29 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
YSL圣罗兰美妆美国官网：Yves Saint Lauret US
2016/11/21 全球购物
Linux操作面试题
2015/02/11 面试题
怎样写好自荐信和推荐信
2013/12/26 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
健康状况证明书
2014/11/26 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
办公室禁烟通知
2015/04/23 职场文书