js 實(shí)現(xiàn)菜單左右滾動顯示示例介紹
更新時(shí)間：2013年11月21日 14:53:37 作者：
菜單左右滾動顯示的實(shí)現(xiàn)方法有很多，在本文將為大家介紹下如何使用js實(shí)現(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>
實(shí)現(xiàn)效果
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS中FormData類實(shí)現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
在IE和VB中支持png圖片透明效果的實(shí)現(xiàn)方法(vb源碼打包)
在IE和VB中支持png圖片透明效果的實(shí)現(xiàn)方法(vb源碼打包)，需要的朋友可以參考下。2011-04-04
在項(xiàng)目中我們會遇到一次請求多個(gè)接口,當(dāng)所有請求結(jié)束后進(jìn)行操作,也會遇到多個(gè)請求（大量）同時(shí)進(jìn)行請求資源,這篇文章主要給大家介紹了關(guān)于前端如何控制并發(fā)請求舉例的相關(guān)資料,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了js省市聯(lián)動效果完整實(shí)例代碼,涉及JavaScript數(shù)組的定義與遍歷技巧,代碼非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-12-12
js以及jquery實(shí)現(xiàn)手風(fēng)琴效果
這篇文章主要為大家詳細(xì)介紹了js版本實(shí)現(xiàn)手風(fēng)琴效果和jquery版本實(shí)現(xiàn)的手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細(xì)介紹了小程序自定義日歷效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
js生成隨機(jī)數(shù)之random函數(shù)隨機(jī)示例
js生成隨機(jī)數(shù)可以使用JavaScript Math.random()內(nèi)置函數(shù)，下面有個(gè)不錯(cuò)的示例，大家可以嘗試操作下2013-12-12
35個(gè)JS中實(shí)用工具函數(shù)的代碼分享
身為后臺開發(fā)的各位鐵鐵，實(shí)際開發(fā)不管是公司要求或是自身發(fā)展，學(xué)前端已經(jīng)是我們內(nèi)卷路上必定碰到的，那今天小編就給大家總結(jié)下那些我們工作中可能遇到的一些實(shí)用Js函數(shù)2022-06-06
這篇文章主要介紹了一波JavaScript日期判斷腳本分享,包括計(jì)算日期是否在時(shí)間段內(nèi)即閏年的判斷等,需要的朋友可以參考下2016-03-03
微信公眾號平臺接口開發(fā) 獲取微信服務(wù)器IP地址方法解析
這篇文章主要介紹了微信公眾號平臺接口開發(fā) 獲取微信服務(wù)器IP地址方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08