【网页制作】jQuery操作css实现设置箭头图片

最新推荐文章于 2025-12-01 15:56:28 发布

原创最新推荐文章于 2025-12-01 15:56:28 发布 · 1.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html #jquery

Html+Css+JS / jQuery小型网页综合实战专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用jQuery操作CSS属性，实现在全网热播视频列表中，根据li标签的索引为不同部分添加不同颜色的箭头图片。通过实例演示了HTML结构、CSS样式和JavaScript交互的结合。

🌈据说，看我文章时 关注、点赞、收藏 的 帅哥美女们 心情都会不自觉的好起来。

前言：
🧡作者简介：大家好我是 user_from_future ，意思是 “ 来自未来的用户 ” ，寓意着未来的自己一定很棒~
✨个人主页：点我直达，在这里肯定能找到你想要的~
👍专栏介绍：Html+Css+JS / jQuery小型网页综合实战，一个专注于分享网页制作实例的专栏~

人生苦短，我用python

制作要求

使用jQuery操作标签的css属性实现箭头图片的设置。

制作效果图

在这里插入图片描述

参考源代码

目录结构

└──网页文件夹
	├── css
	│	└──play.css
	├── images
	│	├──flv01.jpg
	│	├──flv02.jpg
	│	├──green.jpg
	│	└──orange.jpg
	├── js
	│	└──jquery-1.12.4.js
	└──index.html

play.css

*{margin: 0; padding: 0;font-family: "微软雅黑";font-size: 14px;}
ul,ol,li{list-style: none;}
#play{margin: 0 auto; width:680px; overflow: hidden;}
#play h1{line-height: 40px; font-size: 22px;}
#play ul>li{
    float: left;
    width: 220px;
    height: 308px;
    overflow: hidden;
    position: relative;
}
#play ol li{height: 37px; padding: 0px 0px 0 10px; position: relative;}
#play ul>li>span{display: block; position: absolute; left: 0; bottom: 0; font-size: 25px; color: #ffffff; font-weight: bold; padding: 5px 10px; z-index: 100;}
#play ul>li>p{position: absolute; left: 50px; bottom: 10px; color: #ffffff;}
#play ol{padding-top: 13px; padding-right: 5px;}
#play ol li span{display:inline-block; color: #ffffff; margin-right: 5px; width: 20px; height: 20px; font-size: 12px; font-weight: bold; text-align: center;}
#play ol li p{position: absolute; right: 0; top: 3px; color: #ffffff; background: #f0a30f; padding: 0 8px; font-size: 12px; display: none;}

flv01.jpg

在这里插入图片描述

flv02.jpg

在这里插入图片描述

green.jpg

在这里插入图片描述

orange.jpg

在这里插入图片描述

jquery-1.12.4.js

自行下载，可以用高版本，也可私信联系获得。

index.html

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>全网热播视频</title>
		<link rel="stylesheet" href="css/play.css">
	</head>
	<body>
		<section id="play">
			<h1>全网热播视频</h1>
			<ul>
				<li><img src="images/flv01.jpg">
					<p>昊花梦</p><span>1</span>
				</li>
				<li><img src="images/flv02.jpg">
					<p>好先生</p><span>2</span>
				</li>
				<li>
					<ol>
						<li><span>3</span>三八线<p>加入看单</p>
						</li>
						<li><span>4</span>吉详天宝<p>加入看单</p>
						</li>
						<li><span>5</span>亲爱的翻译官<p>加入看单</p>
						</li>
						<li><span>6</span>仙剑云之凡<p>加入看单</p>
						</li>
						<li><span>7</span>权力的游戏第五季<p>加入看单</p>
						</li>
						<li><span>8</span>琅琊榜<p>加入看单</p>
						</li>
						<li><span>9</span>那年青春我们正好<p>加入看单</p>
						</li>
						<li><span>10</span>乡村受情8（上）<p>加入看单</p>
						</li>
					</ol>
				</li>
			</ul>
		</section>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("li:lt(2)").css("margin-right", "10px");
				$("ol").css("background-color", "#f0f0f0");
				$("span").css("background-color", "#a4a4a4");
				$("span:lt(3)").css("background-color", "#fea418");
			});
			$("li").ready(function() {
				$("ol li:lt(5)").css("background", "url(images/orange.jpg) no-repeat right top");
				$("ol li:eq(1)").css("background", "url(images/green.jpg) no-repeat right top");
				$("ol li:gt(4)").css("background", "url(images/green.jpg) no-repeat right top");
			});
		</script>
	</body>
</html>