原生js鼠标悬停图标菜单滑动门显示效果



137 544 182



特效描述:鼠标悬停 图标菜单 滑动门显示,原生js模仿京东主页图片滑动出现的效果,鼠标悬停图标菜单,显示滑动门切换代码。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/zby_main.css" />
<link rel="stylesheet" type="text/css" href="css/zby_main.css" />

2. 引入JS

<script type="text/javascript" src="js/zby_main.js"></script>
<script type="text/javascript" src="js/zby_jl.js"></script>
<script type="text/javascript" src="js/zby_main.js"></script>
<script type="text/javascript" src="js/zby_jl.js"></script>

3. HTML代码

<!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>双层滑动门</title>
</head>
<body onLoad="shengshi()">
	<div class="zby_box">
		<div id="zby_main">
			<ul>
				<li id="i1" onClick="img1()"><img src="img/电信专场.png"></li>
				<li id="i2" onClick="img2()"><img src="img/企业团购.png"></li>
				<li id="i3" onClick="img3()"><img src="img/官.png"></li>
				<li id="i4" onClick="img4()"><img src="img/小米移动.png"></li>
				<li id="i5" onClick="img5()"><img src="img/以旧换新.png"></li>
				<li id="i6" onClick="img6()"><img src="img/话费充值.png"></li>
			</ul>
		</div>
		<div id="zby_1">
			<div>
				<ul class="zz">
					<li id="zby_1_1" onMouseOver="show1()"><a href="#">话费</a></li>
					<li id="zby_1_2" onMouseOver="show1_2()"><a href="#">电影</a></li>
					<li id="zby_1_3" onMouseOver="show1_3()"><a href="#">游戏</a></li>
				</ul>
				<a class="close" id="ss" onClick="img7()">×</a>
				<div id="zby_11">
					<!--第一行一列的div-->
					<div class="zby_11">
						<ul>
							<li id="s1"><a href="#" onMouseOver="dx1()">话费充值</a></li>
							<li id="s2"><a href="#" onMouseOver="dx2()">级联菜单</a></li>
							<li id="s3"><a href="#" onMouseOver="dx3()">套餐变更</a></li>
						</ul>
					</div>
					<!--话费充值Div-->
					<div id="s1_1">
						<form action="#i1">
							<label>号码</label>
							<input type="text" placeholder="移动、电信、电信" />
							<br />
							<br />
							<label>面值</label>
							<select name="value">
								<option value="100">100元</option>
								<option value="50">50元</option>
								<option value="30">30元</option>
								<option value="20">20元</option>
								<option value="10">10元</option>
							</select>
						</form>
					</div>
					<!--end-->
					<!--流量充值div-->
					<div id="s1_2">
						<p>所在省:
							<select id="Select2" name="D2" onChange="getCity()">
								<option></option>
							</select>
							<br />
							<br />
							所在市:
							<select id="Select1" name="D1">
								<option></option>
							</select>
						</p>
					</div>
					<!--套餐变更div-->
					<div id="s1_3">
						套餐变更
					</div>
				</div>
				<div id="zby_12">
					电影内容
				</div>
				<div id="zby_13">
					游戏
				</div>
			</div>
		</div>
		<div id="zby_2">
			<div>
				<ul class="zz">
					<li id="zby_2_1" onMouseOver="show2()"><a href="#">机票</a></li>
					<li id="zby_2_2" onMouseOver="show2_2()"><a href="#">彩票</a></li>
					<li id="zby_2_3" onMouseOver="show2_3()"><a href="#">团购</a></li>
				</ul>
				<a class="close" id="ss" onClick="img7()">×</a>
				<div id="zby_21">
					机票内容
				</div>
				<div id="zby_22">
					彩票内容
				</div>
				<div id="zby_23">
					团购
				</div>
			</div>
		</div>
		<div id="zby_3">
			<div>
				<ul class="zz">
					<li id="zby_3_1" onMouseOver="show3()"><a href="#">酒店</a></li>
					<li id="zby_3_2" onMouseOver="show3_2()"><a href="#">火车</a></li>
					<li id="zby_3_3" onMouseOver="show3_3()"><a href="#">众筹</a></li>
				</ul>
				<a class="close" id="ss" onClick="img7()">×</a>
				<div id="zby_31">
					酒店内容
				</div>
				<div id="zby_32">
					火车内容
				</div>
				<div id="zby_33">
					众筹内容
				</div>
			</div>
		</div>
		<div id="zby_4">
			<ul class="zz">
				<li id="zby_4_1" onMouseOver="show4()"><a href="#">理财</a></li>
				<li id="zby_4_2" onMouseOver="show4_2()"><a href="#">礼品</a></li>
				<li id="zby_4_3" onMouseOver="show4_3()"><a href="#">白条</a></li>
			</ul>
			<a class="close" id="ss" onClick="img7()">×</a>
			<div id="zby_41">
				理财内容
			</div>
			<div id="zby_42">
				礼品内容
			</div>
			<div id="zby_43">
				白条内容
			</div>
		</div>
		<div id="zby_5">
			<ul class="zz">
				<li id="zby_5_1" onMouseOver="show5()"><a href="#">动漫</a></li>
				<li id="zby_5_2" onMouseOver="show5_2()"><a href="#">电影</a></li>
				<li id="zby_5_3" onMouseOver="show5_3()"><a href="#">游戏</a></li>
			</ul>
			<a class="close" id="ss" onClick="img7()">×</a>
			<div id="zby_51">
				动漫内容
			</div>
			<div id="zby_52">
				电影内容
			</div>
			<div id="zby_53">
				游戏内容
			</div>
		</div>
		<div id="zby_6">
			<ul class="zz">
				<li id="zby_6_1" onMouseOver="show6()"><a href="#">大话西游</a></li>
				<li id="zby_6_2" onMouseOver="show6_2()"><a href="#">美人鱼</a></li>
				<li id="zby_6_3" onMouseOver="show6_3()"><a href="#">大胜归来</a></li>
			</ul>
			<a class="close" id="ss" onClick="img7()">×</a>
			<div id="zby_61">
				大话西游内容
			</div>
			<div id="zby_62">
				美人鱼内容
			</div>
			<div id="zby_63">
				大胜归来内容
			</div>
		</div>
	</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滑动 滚动切换 滑动选项卡切换 悬浮浮动 选项卡切换 滑动手风琴 滑动星星打分 浮动提示框 导航菜单 其他 浮动导航菜单 滑动选项卡切换 图标导航菜单 选项卡自动切换 鼠标滑过

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到