首页
所有分类
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（笔记）
Oct 06 Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
Vue编程式跳转的实例代码详解
Jul 10 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
js实现菜单跳转效果
Dec 11 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 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
self(1) tabBar(1) Hudi(1) capture(1) Navigator(1) uniapp(4) element-china-area-data(1) Flutter(2) 数据重复(1) Apache(17)
You might like
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
jquery cookie插件代码类
2009/05/26 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
python利用sklearn包编写决策树源代码
2017/12/21 Python
python 美化输出信息的实例
2018/10/15 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
python实现UDP协议下的文件传输
2020/03/20 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
Python调用JavaScript代码的方法
2020/10/27 Python
美国优质马术服装购买网站：Breeches.com
2019/12/16 全球购物
幼儿园教研活动总结
2014/04/30 职场文书
委托书格式
2014/08/01 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
mysql数据库如何转移到oracle
2022/12/24 MySQL