返回首页

温馨提示：本站文章标题使用的字体是《微软雅黑》点击下载这个字体.

顶一下

1 次

可自定义数量、默认级别的星星打分

来源：本站原创编辑：佚名时间：2008年11月1日浏览：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>yangedie 原创</title>
<style type="text/css">
.starBox{position: relative;padding:0;height:30px;background:url(http://demo.web265.com/starRate.gif) left top repeat-x}
.defaultStars{ height:30px; background:url(starRate.gif) left -30px repeat-x; }
.starBox a{
	position:absolute; left:0; top:0;
	height:30px;text-indent:-1000px; overflow:hidden;
	background:url(http://demo.web265.com/starRate.gif) left 100px repeat-x;
	outline:none;hide-focus:expression(this.hideFocus=true);
}
.starBox a:hover{ background-position:left -60px} 
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id);}
window.onload = function(){
	rate("test1",["很差","不好","一般","还可以","很好"],2);
	rate("test2",["1级","2级","3级","4级","5级","6级","7级","8级","9级"],5);
}
function rate(divID,titles,defaultValue){
	var size = titles.length;
	var rateHTML = "<div class='starBox' style='width:" + 30*size + "px'>";
	
	rateHTML += "<div class='defaultStars' style='width:" + 30*defaultValue + "px'></div>";
	for (var i=1;i<=size;i++){
		var index = size-i;
		rateHTML += "<a href='javascript:void(0)' style='width:" + 30*i + "px;z-index:" + index +"' title='" + titles[i-1] + "'>" + i + "</a>";
	}
	rateHTML += "</div>";
	$(divID).innerHTML = rateHTML;
	$(divID).onclick = function(e){
		var src = e?e.target:event.srcElement;
		if (src.tagName == "A"){
			src.parentNode.firstChild.style.display="none";
			src.style.backgroundPosition = "left -60px";
			var mask = document.createElement("div");
			mask.style.cssText = "width:100%;height:100%;position:absolute; left:0; top:0;z-index:99";
			src.parentNode.appendChild(mask);
			alert("你投票的值是：" + src.innerHTML);
		}
	}
}
</script>
</head>

<body>
<p>请投下你的一票</p>
<div id="test1"></div>
<p>请投下你的一票</p>
<div id="test2"></div>
</body>
</html>
本代码由<a href="http://www.web265.com" target="_blank">站长素材网(http://www.web265.com)</a>整理发布

运行代码
复制代码
另存代码
收藏本页

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

上一篇：进一步完善的“Select美化”，自动渲染页面所有带class="select"的下拉框

下一篇：焦点Banner效果滚动实现效果

赞助商友情链接

站长常用工具

更多

返回首页

可自定义数量、默认级别的星星打分

赞助商友情链接

站长常用工具

相关文章