据说，看我文章时 关注、点赞、收藏 的 帅哥美女们 心情都会不自觉的好起来。
前言：
作者简介：大家好我是 user_from_future ，意思是 “ 来自未来的用户 ” ，寓意着未来的自己一定很棒~
?个人主页：点我直达，在这里肯定能找到你想要的~
专栏介绍：Html+Css+JS / jQuery小型网页综合实战 ，一个专注于分享网页制作实例的专栏~
文章图片
制作要求 使用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
全网热播视频 - 锐客网
id="play">
全网热播视频
文章图片
昊花梦
>1
文章图片
好先生
>2
-
- >3三八线加入看单
- >4吉详天宝加入看单
- >5亲爱的翻译官加入看单
- >6仙剑云之凡加入看单
- >7权力的游戏第五季加入看单
- >8琅琊榜加入看单
- >9那年青春我们正好加入看单
- >10乡村受情8（上）加入看单
type="text/javascript" src="https://www.it610.com/article/js/jquery-1.12.4.js">
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");
});
部分解释 这段代码中，
li:lt(5) 意思是 li 标签中索引小于 5 的标签列表；li:eq(1) 意思是 li 标签中索引等于 1 的标签列表；li:gt(4) 意思是 li 标签中索引大于 4 的标签列表。致谢 【Html+Css+JS|【网页制作】jQuery操作css实现设置箭头图片】本篇实例素材来自于 X Y H ~
