Chapter第七章

最新推荐文章于 2022-07-21 23:53:51 发布

k123liu

最新推荐文章于 2022-07-21 23:53:51 发布

阅读量140

点赞数

本文链接：https://blog.csdn.net/k123liu/article/details/85266111

版权

鼠标事件：click、mouseover、mouseout、mouseenter、mouseleave
键盘事件：keydown、keyup、keypress
浏览器事件：resize

show()：可以控制元素的显示，还能定义显示元素时的效果，如显示速度。
hide()：可以控制元素的隐藏，还能定义隐藏元素时的效果，如隐藏速度。
toggle()：除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态。
fadeIn()：控制元素淡入，同时可以定义元素淡入时的效果，如显示速度。
fadeOut()：元素淡出，同时可以定义元素淡出时的效果，如淡出速度。
slideUp()：元素从下到上缩短直至隐藏。
slideDown()：元素会从上向下延伸显示。
animate()：可以自定义动画，例如实现字体大小、位置等变化。

（1）使用css()或addClass()方法该变元素的display样式的值为none。
（2）调用hide()方法。
（3）调用toggle()切换元素的可见状态。
（4）调用fadeOut()或slideUp()隐藏元素。


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>导航特效</title>
<style ">

#nav .navsBox{
	width: 160px;
}
#nav .navsBox .firstNav{
	height:45px;
	line-height:45px;
	background-color:#EBEBEB;
	border-left:10px solid #FE705C;
	padding-left:20px;
	width:130px;
	font-weight:bold;
	cursor: pointer;
}
#nav .navsBox ul{
	display:none;
	list-style:none; 
}
#nav .navsBox ul li{
	display:block;
	height:45px;
	line-height:45px;
	padding-left:70px;
	width:90px; 
	background:#F2F2F2 33px 7px no-repeat;
}

#nav .navsBox ul li.jedh{
	background-image:url("./images/huan.gif");
}
#nav .navsBox ul li.jlbbyk{
	background-image:url("./images/you.gif");
}
#nav .navsBox ul li.jwljb{
	background-image:url("./images/gouwu.gif");
}
#nav .navsBox ul li.mrljb{
	background-image:url("./images/meiri.gif");
}
#nav .navsBox ul li.vipjtj{
	background-image:url("./images/zhe.gif");
}
#nav .navsBox ul li.onbg{
	background-color:#F9DBD1;
}

#nav .navsBox ul li a{
	color:#000;
	text-decoration:none;	
}


</style>
</head>
<body>
<div id="nav"> 
	 <div class="navsBox">
	 	<div class="firstNav">购物特权</div> 
		<ul>
			<li class="jedh"><a href="#">全额兑换</a></li>
			<li class="jlbbyk"><a href="#">俱乐部包邮卡</a></li>
			<li class="jwljb"><a href="#">购物领金币</a></li>
			<li class="mrljb"><a href="#">每日领金币</a></li>
			<li class="vipjtj"><a href="#">VIP阶梯价</a></li>
		</ul>
	 </div> 
</div>
<script  src="js/jquery-1.12.4.js" ></script>
<script>
	$(document).ready(function () {
		$("#nav .navsBox .firstNav").click(function(){
			var $list = $("#nav .navsBox ul");
			$list.toggle();
		});
		$("#nav .navsBox ul li").mouseover(function(){
			$(this).addClass("onbg");  //为该元素添加类样式.onbg
		}).mouseout(function(){
			$(this).removeClass("onbg");//为该元素移除类样式.onbg
		});
	});
</script>
</body>
</html>


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>FAQ列表</title>
<style >
a{
	color:#000;
	text-decoration:none;
}
#menu{
	margin:30px;
	width:188px;
	background-color:#EFFDFA;
	
}
#menu .top{
	height:40px;
	line-height:40px;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	border:1px solid #93D6C5;
	border-bottom:none;
}
#menu ul.nav{
	list-style:none; 
	
}
#menu ul.nav li{
	display:block;
	height:30px;
	line-height:30px;
	border:1px solid #93D6C5;
	border-top:none;
	 padding-left:30px;
	background:url(images/point.jpg) no-repeat 15px center;
}
#menu ul.nav li.lastone{
	border:none;
	cursor:pointer;
	background:#fff url(images/up.jpg) no-repeat center top;
}
#menu ul.nav li.up{
	background:#fff url(images/down.jpg) no-repeat center top;
}
span.icon{
	float:right;
	margin-right:10px;
	margin-top:10px;
}
</style>

</head>
<body>
<div id="menu">
	<div class="top">全部商品详细分类</div>
    <ul class="nav">
        <li><a href="#">尾品汇</a></li>
        <li><a href="#">图书音像数字管</a></li>
        <li><a href="#">美妆个护</a></li>
        <li><a href="#">家具、家纺、家装</a></li>
        <li><a href="#">鞋靴、箱包</a></li>
        <li><a href="#">珠宝装饰</a></li>
        <li><a href="#">手表/眼镜/礼品</a></li>
        <li><a href="#">运动户外</a></li>
        <li><a href="#">食品、茶、酒</a></li>
        <li><a href="#">手机、数码</a></li>
        <li><a href="#">电脑办公</a></li>
        <li class="lastone"></li>
    </ul>
</div>
<script src="js/jquery-1.12.4.js" ></script>
<script>
	$(document).ready(function(){
		$("#menu li.lastone").click(function(){
			//切换菜单
			$("#menu li:gt(6):not(:last)").toggle();
			//更换底部夹头方向
			$(this).toggleClass("up");
		});
	});

</script>
</body>
</html>

k123liu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Chapter第七章

鼠标事件：click、mouseover、mouseout、mouseenter、mouseleave键盘事件：keydown、keyup、keypress浏览器事件：resizeshow()：可以控制元素的显示，还能定义显示元素时的效果，如显示速度。hide()：可以控制元素的隐藏，还能定义隐藏元素时的效果，如隐藏速度。toggle()：除了可以模拟鼠标的连续单击事件外...
复制链接

扫一扫