教程集 www.jiaochengji.com
Golang 教程
教程集 >  脚本编程  >  javascript  >  正文 javascript星级评分效果示例

javascript星级评分效果示例

发布时间：2016-11-23   编辑：jiaochengji.com
教程集为您提供javascript星级评分效果示例等资源，欢迎您收藏本站，我们将为您提供最新的javascript星级评分效果示例资源
现在的很多网站都会有星级评分效果，下面我也来给大家推荐一款不错的纯js写的星级评分效果代码，希望此方法对各位同学有帮助。
提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <style> #starBox{height:20px;padding:5px;width:130px;margin:100px auto 10px;} #starBox em{float:left;width:26px;height:20px;background:url(/blog/upload/image/20130929130715.png) 0 -20px no-repeat;} #starNotice{font:24px SimSun;width:130px;margin-left:auto;margin-right:auto;} </style>
<em></em> <em></em> <em></em> <em></em> <em></em>

<script type="text/javascript"> window.onload = function(){ var star = document.getElementsByTagName('em'); var oDiv = document.getElementById('starBox'); var temp = 0; for(var i = 0, len = star.length; i < len; i ){ star[i].index = i; star[i].onmouseover = function(){ clear(); for(var j = 0; j < this.index 1; j ){ star[j].style.backgroundPosition = '0 0'; } } star[i].onmouseout = function(){ for(var j = 0; j < this.index 1; j ){ star[j].style.backgroundPosition = '0 -20px'; } current(temp); } star[i].onclick = function(){ temp = this.index 1; document.getElementById('starNotice').innerHTML = temp ' 颗星'; current(temp); } } //清除所有 function clear(){ for(var i = 0, len = star.length; i < len; i ){ star[i].style.backgroundPosition = '0 -20px'; } } //显示当前第几颗星 function current(temp){ for(var i = 0; i < temp; i ){ star[i].style.backgroundPosition = '0 0'; } } }; </script></textarea>
提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
基于jQuery的星级评分插件
javascript星级评分效果示例
jQuery 星级评分插件 jQuery Raty
jQuery PHP实现购物商城常用的星级评分效果
jQuery实现星级评分实例代码
很酷的javascript 星级评分效果
javascript 打分星星评价效果
Jquery 星级评价功能(简单版)的实现代码
在iOS里实现高性能的评分控件
js 星级选择器的实现代码(适用于评论功能)

上一篇：拍拍产品申缩菜单 下一篇：js横向滚动特效代码
[关闭]
最近更新
浏览排行

关于本站 | 网站地图 | 联系我们 | 免责声明 | 友情链接
京ICP备12039225号-6 广告合作请加QQ:441358019
CopyRight © 2010-2014 教程集 jiaochengji.com , All Rights Reserved.

~ ~