JS原生实现五角星评价详情demo
2024-10-08 02:59:00
<style>
*{margin: 0;padding: 0;}
.pingfen{ width: 195px; margin:10px auto; height:20px; position: relative;}
.pingfen ul{height:35px; margin-bottom: 10px;}
.pingfen li{ width: 35px;margin-left: 4px; float: left; height: 35px; cursor: pointer; background: url(/public/nrmap/img2/fstar2.png) no-repeat center center; list-style: none;}
.pingfen .active{background: url(/public/nrmap/img2/fstar1.png) no-repeat center center;}
.pingfen p{
position: absolute; top:24px; left: 0px; width: 134px; height: 28px;
background: #fff; line-height: 28px; text-align: center; border:1px solid #333;
display:none;}
</style> <script>
var aData =["很差","较差","一般","推荐","力推"];
window.onload=function(){
var oDiv = document.getElementById("rank");
var aLi = oDiv.getElementsByTagName("li");
var oP = oDiv.getElementsByTagName("p")[0];
var i =0;
for(i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].onmouseover= function(){
oP.style.display = "block";
oP.style.marginTop="30px";
oP.innerHTML=aData[this.index];
for(i=0; i<=this.index;i++){
aLi[i].className="active";
}
};
aLi[i].onmouseout = function(){
oP.style.display = "";
for(i=0; i<aLi.length; i++){ aLi[i].className="";
};
aLi[i].onclick=function(){
alert(aData[this.index]);
};
}
};
</script> <body>
<div id="rank" class="pingfen">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>加载中</p>
</div>
</body>
最新文章
- 基于FS4412的DS18B20温度采集编程实现(1-时序分析)
- Java语言程序设计(基础篇) 第六章 方法
- win10 使用docker
- [poj2184]我是来水一下背包的
- 转: 通过不到100行Go代码打造你自己的容器
- 不允许对索引显式地使用 DROP INDEX,该索引正用于 UNIQUE KEY
- android VoiceRecognition 语音识别并打印到列表上
- 泛虚拟化技术(以Xen为例)
- 《学习opencv》笔记——矩阵和图像操作——cvSetIdentity,cvSolve,cvSplit,cvSub,cvSubS and cvSubRS
- Android命令行工具logcat详细用法!
- MyBatis笔记03
- SpringCloud教程 | 第五篇: 路由网关(zuul)(Finchley版本)
- 【leetcode】461. Hamming Distance
- Cocos2d-x项目创建方式
- linux达人养成计划
- http的长连接和短连接(数据库也一样)
- bzoj1619
- 【Leetcode】【Medium】Simplify Path
- iOS:文字相关(19-01-08更)
- 【费用流】bzoj1520 [POI2006]Szk-Schools
热门文章
- 解决微信浏览器内video全屏问题
- 2019Python学习路线图
- ArcMap中给点shp添加字段后,shp文件破坏无法打开
- mysql高级教程(二)-----性能分析
- 【Java爬虫】爬取南通大学教务处成绩
- [Array] 561. Array Partition I
- 【html、CSS、javascript-12】jquery-效果
- [转]深入理解ajax系列——进度事件
- 在网站制作过程中发现的block和inline-block不同。
- 彻底删除 Git 项目中的文件(BFG Repo-Cleaner 用法)