js 實現(xiàn)菜單左右滾動顯示示例介紹
更新時間：2013年11月21日 14:53:37 作者：
菜單左右滾動顯示的實現(xiàn)方法有很多，在本文將為大家介紹下如何使用js實現(xiàn)，需要的朋友可以參考下，希望對大家有所幫助
復(fù)制代碼 代碼如下:
<!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>學(xué)知識></p>
</div>
<div class="right_box" style="display:block;">
<div class="text_content">
<p>有事情請聯(lián)系小白！交志同道合的朋友</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>有事情請聯(lián)系小白！交志同道合的朋友</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>有事情請聯(lián)系小白！交志同道合的朋友</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>找業(yè)務(wù)></p>
</div>
<div class="right_box">
<div class="text_content">
<p>有事情請聯(lián)系小白！交志同道合的朋友</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>有事情請聯(lián)系小白！交志同道合的朋友</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>求發(fā)展></p>
</div>
<div class="right_box">
<div class="text_content">
<p>有事情請聯(lián)系小白！交志同道合的朋友</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>
實現(xiàn)效果
相關(guān)文章
原生js?XMLhttprequest請求onreadystatechange執(zhí)行兩次的解決
這篇文章主要介紹了原生js?XMLhttprequest請求onreadystatechange執(zhí)行兩次的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
使用Javascript插件,在瀏覽器客戶端動態(tài)的為代碼著色,可以顯示行號，具體實現(xiàn)代碼如下，感興趣的朋友可以參考下哈2013-05-05
Auto.JS實現(xiàn)抖音刷寶等刷視頻app,自動點贊,自動滑屏,自動切換視頻功能
auto.js是一個支持無障礙服務(wù)的Android平臺上的JavaScript IDE，可以編寫各種自動化腳本，這篇文章主要介紹了Auto.JS實現(xiàn)抖音刷寶等刷視頻app,自動點贊,自動滑屏,自動切換視頻功能,需要的朋友可以參考下2020-05-05
下面小編就為大家?guī)硪黄獪\談bootstrap使用中的一些問題以及解決過程。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
replace方法的語法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，reExp可以是正則表達式對象(RegExp)也可以是字符串(string)，replaceText是替代查找到的字符串。。為了幫助大家更好的理解，下面舉個簡單例子說明一下2008-02-02
這篇文章主要介紹了Bootstrap3下拉菜單的實現(xiàn)方法，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-02-02
這篇文章主要給大家介紹了關(guān)于javascript類數(shù)組的深入理解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了seajs和requirejs模塊化,結(jié)合具體案例形式分析了seaj和requirejs模塊化應(yīng)用的相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下2019-08-08
Object的相關(guān)方法 和 js遍歷對象的常用方法總結(jié)
這篇文章主要介紹了Object的相關(guān)方法 和 js遍歷對象的常用方法,結(jié)合實例形式總結(jié)分析了Object對象操作的操作方法與js遍歷的三種常用方法,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了js實現(xiàn)正則匹配中文標(biāo)點符號的方法,涉及JavaScript正則匹配與判定的簡單使用技巧,需要的朋友可以參考下2015-12-12