JS实现星星评分功能实例代码(两种方法) |
您所在的位置：网站首页 › 表格评价等级怎么做的 › JS实现星星评分功能实例代码(两种方法) |
JS实现星星评分功能实例代码(两种方法)
|
转载自 JS实现星星评分功能实例代码(两种方法) 一、方法1 1、用到图片
2、结构和样式 Document ul { padding-left: 0; overflow: hidden; } ul li { float: left; list-style: none; width: 27px; height: 27px; background: url(img/star.gif) } ul li a { display: block; width: 100%; padding-top: 27px; overflow: hidden; } ul li.light { background-position: 0 -29px; } 1 2 3 4 5li加了light的class就会变成亮星，就是换了背景位置，把空心的星星变成了实心的。所以js实现的时候点亮就是给li加一个light的类名。 效果：
3、交互js var num=finalnum = tempnum= 0; var lis = document.getElementsByTagName("li"); //num:传入点亮星星的个数 //finalnum:最终点亮星星的个数 //tempnum:一个中间值 function fnShow(num) { finalnum= num || tempnum;//如果传入的num为0，则finalnum取tempnum的值 for (var i = 0; i < lis.length; i++) { lis[i].className = i < finalnum? "light" : "";//点亮星星就是加class为light的样式 } } for (var i = 1; i |
【本文地址】
今日新闻 |
推荐新闻 |