jquery星级评分特效制作电影视频网站滑动星星打分效果



142 564 189



特效描述:星级评分特效 电影视频网站打分 滑动星星打分,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

加群请备注:从官网了解到