jquery星級評分特效制作電影視頻網站滑動星星打分效果



145 577 193



特效描述:星級評分特效 電影視頻網站打分 滑動星星打分,jquery星級評論評分特效制作電影媒體視頻網站滑動星星打分效果,鼠標滑過星星顯示評論內容星星打分。jquery下載。

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/score.js"></script>

2. HTML代碼

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#fff;font:12px "宋體",Arial;color:#A1A1A1;}
/* score */
.score{position:relative;width:140px;height:240px;border:solid 1px #ddd;padding:10px;margin:100px auto 0 auto;}
.score_loading{background:url(images/loading_s.gif) center no-repeat;width:140px;height:190px;}
.score_content{height:190px;}
.score_avg span{position:relative;font-size:42px;font-weight:bold;font-family:Georgia,"Times New Roman",Times, serif;font-style:italic;color:#FFF;letter-spacing:-4px;}
.score_avg span em{position:absolute;top:0;left:10px;color:#FFF;z-index:10;}
.score_avg span i{position:absolute;top:2px;left:12px;color:#069;z-index:8;}
.score_avg{height:64px;width:80px;display:block;background:url(images/_score_bg.gif) 0 0 no-repeat;position:absolute;top:-10px;left:-20px;padding-top:16px;}
.score_total{color:#666;line-height:1.4em;height:50px;padding-left:54px;padding-top:20px;}
.score_total span{color:#F00;font-weight:bold;}
.score_list li{line-height:23px;color:#666;}
.score_list li span{display:inline-block;width:30px;}
.score_list li em{font-style:normal;}
.score_list li i{display:inline-block;border:1px solid #FC6;background-color:#FFC;height:8px;font-size:0px;}
.score_post{position:relative;}
/* starBox */
.starBox{position:relative;width:130px;}
.starlist{height:26px;position:relative;width:130px;overflow:hidden;background:url(images/stars.gif) 0 0 repeat-x;cursor:pointer}
.starlist li{float:left;}
.starlist li a{display:block;width:26px;height:26px;overflow:hidden;text-indent:-9999px;position:absolute;z-index:5;}
.starlist li a:hover{background:url(images/stars.gif) 0 -100px;z-index:3;left:0;}
.starlist a.star_one{left:0;}
.starlist a.star_one:hover{width:26px;}
.starlist a.star_two{left:26px;}
.starlist a.star_two:hover{width:52px;}
.starlist a.star_three{left:52px;}
.starlist a.star_three:hover{width:78px;}
.starlist a.star_four{left:78px;}
.starlist a.star_four:hover{width:104px;}
.starlist a.star_five{left:104px;}
.starlist a.star_five:hover{width:130px;}
.star_current_rating{background:url(images/stars.gif) 0 -50px;position:absolute;height:26px;z-index:6;top:29px;left:0 }
.star_title{line-height:21px;background-color:#F6F6F6;border-top:1px solid #F0F0F0;border-bottom:1px solid #F0F0F0;margin-bottom:6px;width:130px;}
/* star_tip */
.star_tip{border:1px solid #F90;background-color:#FFC;height:21px;width:130px;top:-2px;left:0;position:absolute;line-height:21px;display:none;}
.star_tip s{position:absolute;top:22px;left:8px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:#F90 transparent  transparent transparent;border-style:solid dashed dashed dashed;border-width:6px;}
.star_tip s i{position:absolute;top:-7px;left:-6px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:#FFC transparent transparent transparent;border-style:solid dashed dashed dashed;border-width:6px;}
.star_desc{text-align:center;}
</style>
<script>var star = {vid:'1498',vt:'jsfoot 網頁特效'};</script>
<div class="score">
	<div class="score_content" id="score_content">
		<div class="score_loading"></div>
	</div><!--score_content end-->
	<div class="score_post">
		<div id="starBox">
			<div class="star_title">給喜歡的影片評分</div>
			<ul class="starlist" id="starlist">
				<li i="1"><a href="javascript:void(0);" title="1星" class="star_one">1</a></li>
				<li i="2"><a href="javascript:void(0);" title="2星" class="star_two">2</a></li>
				<li i="3"><a href="javascript:void(0);" title="3星" class="star_three">3</a></li>
				<li i="4"><a href="javascript:void(0);" title="4星" class="star_four">4</a></li>
				<li i="5"><a href="javascript:void(0);" title="5星" class="star_five">5</a></li>
			</ul>
			<div class="star_current_rating" id="star_current_rating"></div>
		</div><!--starBox end-->
		<div class="star_tip" id="star_tip">
			<s id="star_tip_arrow"><i></i></s>
			<div id="star_desc" class="star_desc"></div>
		</div><!--star_tip end-->
	</div><!--score_post end-->
</div><!--score end-->



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

湖北30选5开奖结果走势图表