jQuery案例

娇糖玛奇朵~

已于 2023-04-12 12:02:48 修改

阅读量1.1k

点赞数 3

文章标签： 1024程序员节

于 2022-10-24 11:48:20 首次发布

本文链接：https://blog.csdn.net/su3253067688/article/details/127488943

版权

本文通过三个实例展示了jQuery的实用技巧：1)制作王者荣耀英雄展示图，2)实现图书分类的下拉列表，3)进行页面元素的综合操作。每个实例都包含效果展示和源代码，帮助读者深入理解jQuery的应用。

摘要由CSDN通过智能技术生成

1.王者荣耀英雄展示图

效果图：

图片素材：

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			ul li {
				list-style: none;
			}

			#content {
				width: 800px;
				height: 69px;
				margin: 10px auto;
				padding: 10px;
				background: url(img/bg.png);
			}

			#content ul li {
				width: 69px;
				height: 69px;
				float: left;
				margin-left: 10px;
				overflow: hidden;
				border-radius: 5px;
			}

			#content ul .current {
				width: 224px;
			}

			#content ul .current .big {
				display: block;
			}

			#content ul .current .small {
				display: none;
			}

			.small {
				width: 69px;
				height: 69px;
			}

			.big {
				display: none;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#content>ul>li").mouseover(function() {
					//让当前li变宽，然后让里面的大图标显示，小图标隐藏
					$(this).stop().animate({
						width: 224,
					});
					$(this).find(".big").stop().fadeIn();
					$(this).find(".small").stop().hide();

					$(this).siblings().stop().animate({
						width: 69,
					});
					$(this).siblings().find(".big").stop().hide();
					$(this).siblings().find(".small").stop().fadeIn();
				});
			})
		</script>
	</head>

最低0.47元/天解锁文章