星星评分插件

最新推荐文章于 2024-05-08 09:44:11 发布

转载最新推荐文章于 2024-05-08 09:44:11 发布 · 498 阅读

js 专栏收录该内容

10 篇文章

订阅专栏

博客内容为一个链接，指向jQuery示例，同时提及了CSS、HTML和jQuery相关内容，这些均为前端开发常用技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自https://demo.demohuo.top/jquery/35/3532/demo/
在这里插入图片描述
css.

<style>
.set_image_all {
	cursor: pointer;
	position: relative;
}

.set_image_all .set_image_item {
	position: relative;
	display: inline-block;
	z-index: 11;
	visibility: visible;
}

.set_image_all .set_image_top {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}

.set_image_all .set_image_top>div {
	display: inline-block;
	overflow: hidden;
}

.set_image_all .set_image_top>div>img {
	height: 100%;
}

.grade {
	vertical-align: top;
}
</style>

html and jq

<body>

<div id="star_grade"></div>
<br>

<div id="star_grade1"></div>
<br>

<div id="star_grade2"></div>
<br>

<div id="star_grade3"></div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/markingSystem.js"></script>
<script type="text/javascript">
$("#star_grade").markingSystem({
	num: 5,
	havePoint: true,
	haveGrade: true,
	unit: '星',
	grade: 2.5,
	height: 20,
	width: 20,
})
$("#star_grade1").markingSystem({
	backgroundImageInitial: 'images/love_gary.png',
	backgroundImageOver: 'images/love_red.png',
	num: 5,
	havePoint: false,
	haveGrade: true,
	unit: '星',
	grade: 3,
	height: 30,
  width: 30,
})
$("#star_grade2").markingSystem({
	backgroundImageInitial: 'images/face_ku_bottom.png',
	backgroundImageOver: 'images/face_ku_top.png',
	num: 5,
	havePoint: true,
	haveGrade: true,
	unit: '星',
	grade: 1
})
$("#star_grade3").markingSystem({
	backgroundImageInitial: 'images/face_happy_bottom.png',
	backgroundImageOver: 'images/face_happy_top.png',
	num: 5,
	havePoint: true,
	haveGrade: true,
	unit: '星',
	grade: 1,
	 height: 32,
	width: 32,
})
</script>

</body>