js滑動星星打分制作影視網站星級打分代碼



113 450 151



特效描述:滑動星星打分 影視網站打分 星級打分,js滑動星星打分各大影視網站流行的星級打分代碼效果,通過鼠標滑過星星,來給電影或視頻打分評論的效果。

代碼結構

1. HTML代碼

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif , "新宋體";}
/* sitelogo */
#sitelogo{position:relative;margin:40px auto;width:430px;height:60px;border:solid 1px #ddd;padding:10px 10px 0 10px;}
#sitelogo span{display:block;float:left;}
#sitelogo img{border:#e0e0e0 1px solid;padding:2px;}
#sitelogo a:hover img{border:#69f 1px solid;padding:2px;}
/* sitelogo ul */
#sitelogo ul{display:block;float:left;width:100px;height:28px;position:relative;background: url('images/starrating.gif') top left repeat-x;margin:22px 5px 0 32px;}
#sitelogo ul li{float:left;}
#sitelogo ul li a{display:block;width:10px;height:28px;text-indent:-9000px;z-index:20;position:absolute;overflow:hidden;}
#sitelogo ul li a:hover{background:url('images/starrating.gif') left 35px;z-index:2;left:0;}
#sitelogo ul a.star1{left:0px;}
#sitelogo ul a.star1:hover{width:10px;}
#sitelogo ul a.star2{left:10px;}
#sitelogo ul a.star2:hover{width:20px;}
#sitelogo ul a.star3{left:20px;}
#sitelogo ul a.star3:hover{width:30px;}
#sitelogo ul a.star4{left:30px;}
#sitelogo ul a.star4:hover{width:40px;}
#sitelogo ul a.star5{left:40px;}
#sitelogo ul a.star5:hover{width:50px;}
#sitelogo ul a.star6{left:50px;}
#sitelogo ul a.star6:hover{width:60px;}
#sitelogo ul a.star7{left:60px;}
#sitelogo ul a.star7:hover{width:70px;}
#sitelogo ul a.star8{left:70px;}
#sitelogo ul a.star8:hover{width:80px;}
#sitelogo ul a.star9{left:80px;}
#sitelogo ul a.star9:hover{width:90px;}
#sitelogo ul a.star10{left:90px;}
#sitelogo ul a.star10:hover{width:100px;}
#currentrating{background:url('images/starrating.gif') left bottom;position:absolute;height:21px;width:0;display:block;text-indent:-9000px;z-index:1;}
#sitelogo #pftip{position:absolute;top:8px;left:168px;width:200px;color:#999;font-size:14px;}
#sitelogo #pfno{margin:24px 8px 0 0;width:40px;color:green;font-family:Arial;font-weight:bold;font-size:14px;}
#sitelogo p{width:110px;float:left;color:#666;}
#sitelogo p span{font-family:Arial;font-style:italic;color:#f60;}
#sitelogo #pfshi{font-size:32px;line-height:28px;font-weight:bold;}
#sitelogo #pfge{font-size:18px;line-height:22px;}
#sitelogo p span.no{width:110px;clear:both;color:#666;font-style:normal;font-size:12px;}
</style>
<script type="text/javascript">
function GI(id){
	return document.getElementById(id);
}
function infen(var1){
	var fentip=new Array("","很差,浪費生命","很差,浪費生命","不喜歡","不喜歡","一般,不妨一看","一般,不妨一看","一般,不妨一看","喜歡,值得推薦","喜歡,值得推薦","非常喜歡,不容錯過");
	if (var1>0){
		GI("pfno").innerHTML=var1+"分 ";
		GI("pftip").innerHTML=fentip[var1];
		GI("currentrating").style.display="none";
	}
	else{
		GI("pfno").innerHTML="";
		GI("pftip").innerHTML="";
		GI("currentrating").style.display="block";
	}
}
var http_request = false;
function makeRequest(url, functionName, httpType, sendData) {
	http_request = false;
	if (!httpType) httpType = "GET";
	if (window.XMLHttpRequest) { // Non-IE...
		http_request = new XMLHttpRequest();
		if (http_request.overrideMimeType) {
			http_request.overrideMimeType('text/plain');
		}
	} else if (window.ActiveXObject) { // IE
		try {
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				http_request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		}
	}
	if (!http_request) {
		alert('無法發送請求,請稍后再試。');
		return false;
	}
	var changefunc="http_request.onreadystatechange = "+functionName;
	eval (changefunc);
	//http_request.onreadystatechange = alertContents;
	http_request.open(httpType, url, true);
	http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	http_request.send(sendData);
}
function getReturnedText () {
	if (http_request.readyState == 4) {
		if (http_request.status == 200) {
			var messagereturn = http_request.responseText;
			return messagereturn;
		} else {
			alert('請求出現問題,請稍后再試。');
		}
	}
}
function EchoReturnedText () {
	if (http_request.readyState == 4) {
		if (http_request.status == 200) {
			var messagereturn = http_request.responseText;
			if(messagereturn!='isfail'){
				var r;
				r=messagereturn.split('|');
				if(r.length!=1){
					if (r[0]=="8")
					{
						alert("評分成功,感謝您的參與。")
						GI("pfshi").innerHTML=r[1];
						GI("pfge").innerHTML=r[2];
						GI("pfren").innerHTML=r[3];
						GI("currentrating").style.width=r[4]+"px";
					}
				}
				else{
					if (messagereturn=="1")
					{
						alert("您已經參加過該網站的評分。")
					}
					else if (messagereturn=="2")
					{
						alert("評分失敗,請稍后再試。")
					}
					else if (messagereturn=="3")
					{
						alert("兩次評分間隔時間太短,請稍后再試。")
					}
					else{
						alert(messagereturn);
					}
					//document.getElementById('ajaxarea').innerHTML=messagereturn;
				}
			}
		} else {
			alert('請求出現問題,請稍后再試。');
		}
	}
}
</script>
	<div id="sitelogo">
		<span><a href="http://www.msi.com/language/" target="_blank"><img src="images/1231.gif" width="120" height="40" alt="jsfoot網頁特效" /></a></span>
		<ul class="starrating">
			<li id="currentrating"></li>
			<li><a onmouseover="infen(1)" onmouseout="infen(0)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/1','EchoReturnedText','GET','');" class="star1">1</a></li>
			<li><a onmouseover="infen(2)" onmouseout="infen(0)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/2','EchoReturnedText','GET','');" class="star2">2</a></li>
			<li><a onmouseover="infen(3)" onmouseout="infen(0)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/3','EchoReturnedText','GET','');" class="star3">3</a></li>
			<li><a onmouseover="infen(4)" onmouseout="infen(0)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/4','EchoReturnedText','GET','');" class="star4">4</a></li>
			<li><a onmouseover="infen(5)" onmouseout="infen(0)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/5','EchoReturnedText','GET','');" class="star5">5</a></li>
			<li><a onmouseover="infen(6)" onmouseout="infen(0)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/6','EchoReturnedText','GET','');" class="star6">6</a></li>
			<li><a onmouseover="infen(7)" onmouseout="infen(0)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/7','EchoReturnedText','GET','');" class="star7">7</a></li>
			<li><a onmouseover="infen(8)" onmouseout="infen(0)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/8','EchoReturnedText','GET','');" class="star8">8</a></li>
			<li><a onmouseover="infen(9)" onmouseout="infen(0)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/9','EchoReturnedText','GET','');" class="star9">9</a></li>
			<li><a onmouseover="infen(10)" onmouseout="infen(0)" href="javascript:makeRequest('http://www.17sucai.com/pins/ratings/716/10','EchoReturnedText','GET','');" class="star10">10</a></li>
		</ul>		
		<span id="pftip"></span>
		<span id="pfno"></span>
		<p><span id="pfshi">9</span><span id="pfge">.5</span><span class="no">(已有<label id="pfren">48</label>人評分)</span></p>
	</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動星星打分 其他 滑動星星打分 鼠標滑過 鼠標懸停 跟隨鼠標移動
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子