js 实现菜单左右滚动显示示例介绍_javascript技巧

复制代码 代码如下:

    <!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> 

实现效果

时间： 2024-11-02 20:29:47

js 实现菜单左右滚动显示示例介绍_javascript技巧的相关文章

JS中数组Array的用法示例介绍_javascript技巧

new Array() new Array(len) new Array([item0,[item1,[item2,...]]] 使用数组对象的方法: var objArray=new Array(); objArray.concact([item1[,item2[,....]]]-------------------将参数列表连接到objArray的后面形成一个新的数组并返回,原有数组不受影响.如:var arr=["a","b","c"];

js switch case default 的用法示例介绍_javascript技巧

复制代码 代码如下: switch(tagName){ case "span": node = element.parent().parent(); element = element; break; case "td": node = element.parent(); element = element.find("span"); break; default: node = element; break; } 以上语句等同于 if(tagN

js 跳出页面的frameset框架示例介绍_javascript技巧

很多网页都是框架结构的,在很多的情况下会通过按钮点击事件或链接,跳出框架转到其它界面.例如说点击"注销登录"返回到登录界面. 一.通过运行脚本跳出框架有以下几种写法: 复制代码 代码如下: 1.<script language = javascript>window.open('Login.aspx','_top')</script>" 2.<script language = javascript>window.open('Login.a

JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法_javascript技巧

本文实例讲述了JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法.分享给大家供大家参考,具体如下: setTimeout 用于延时器,只执行一次. setInterval:用于多次执行. 项目中引用到jquery.timers-1.2.js定时器,并且MSClass做信息定期滚动,每3分钟执行一次,执行三次左右,滚动的次数越来越快,原因在于timers和MSClass都用了setInterval, 都会再次添加一个setInterval,最后导致几个setIn

如何用js实现鼠标向上滚动时浮动导航_javascript技巧

为什么会有这个需求呢?有没有发现在国外的一些网站,当你向上滚动时,导航条浮动在顶部位置.用户如果是想看内容就可以直接点击到达,省去很多拖动的时间,当然返回顶部也是比较容易.但有时候返回顶部这个按钮往往被人忽略了.下面一起来看看代码和演示(引入jQuery 1.9). 判断鼠标向上滚动,或者向下滚动,可以通过对比用户的上一次滚动的坐标和下一次的坐标,当上一次小于下一次时,即用户在向下滚动,反之,则说明用户在向上滚动.滚动的坐标值可以取窗口的scrollTop. HTML代码示例 <div id=&qu

JS构造函数与原型prototype的区别介绍_javascript技巧

构造函数方法很好用,但是存在一个浪费内存 通过原型法分配的函数是所有对象共享的. 通过原型法分配的属性是独立.-----如果你不修改属性,他们是共享 如果我们希望所有的对象使用同一一个函数,最好使用原型法添加函数,这样比较节省内存. 例子: //----构造函数模式 为Cat对象添加一个不变的属性"type"(种类),再添加一个方法eat(吃老鼠).那么,原型对象Cat就变成了下面这样: <script> function Cat(name, color) { this.n

js代码实现无缝滚动(文字和图片)_javascript技巧

一款适用于方案和图片的JS无缝滚动代码,可控制向左或向右滚动,代码不算复杂,而且本无缝滚动代码兼容性也挺好,你几乎不需要修改什么代码,就能使用了.测试时候把那些带标号的方块都改成图片吧,这样就更有感觉了. 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无缝滚动</title> <s

JS延迟加载加快页面打开速度示例代码_javascript技巧

第一,JS延迟加载 代码如下: 复制代码 代码如下: <script language="JavaScript" src="" id="my"></script> <script language="JavaScript"> setTimeout("document.getElementById('my').src='include/...文件...php'; ",300

JS动态调用方法名示例介绍_javascript技巧

先看看JS的一个函数 JavaScript eval() 函数 定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法 eval(string) 参数 描述 string 必需.要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句. 返回值 通过计算 string 得到的值(如果有的话). 说明 该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回.因此请不要为 eval() 函