js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 其它代码

jQuery实现用户体验调查评分特效

发布时间:2015-09-08 21:24:13    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jQuery实现用户体验调查评分特效
<!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>jQuery实现用户体验调查评分特效</title>    
		<meta name="keywords" content="评分,jQuery用户评分代码" />    
		<script type="text/javascript" src="js/jquery-1.11.3.js"></script>    
		<script type="text/javascript">    
		$(function(){    
			//简洁用户评分代码    
			$(".pfxtFen li").click(function(){    
				$(this).addClass("pfxtCur");    
				$(this).prevAll().addClass("pfxtCur");    
				$(this).nextAll().removeClass("pfxtCur");    
			});    
			$(".pfxtFen li").dblclick(function(){    
				$(".pfxtFen li").removeClass("pfxtCur");    
			});    
		})    
		</script>    
		<style type="text/css">    
			*{margin:0;padding:0;font-family:"微软雅黑"}    
			ul{list-style:none}    
			.pingfenxitong{padding:15px 0;width:1200px;margin:0 auto}    
			.pingfenList{float:left;width:500px;padding-right:20px}    
			.pfxtTitle{font-weight:700;font-size:1.2em;padding:4px 0}    
			.pfxtText{line-height:25px}    
			.pfxtFen{margin:10px 0}    
			.pfxtFen li{float:left;width:98px;height:30px;text-align:center;line-height:30px;border:#ddd 1px solid;background:#f1f1f1;cursor:pointer}    
			.pfxtFen li.pfxtCur{background:#308A95;color:#fff;border:#308A95 1px solid}    
		</style>    
	</head>    
	<body>    
		<!--用户评分代码-->    
		<div class="pingfenxitong">    
			<div class="pingfenList">    
				<div class="pfxtTitle">功能:</div>    
				<div class="pfxtText">你觉得这个创意在功能上优秀吗?</div>    
				<ul class="pfxtFen" title="双击取消评分">    
					<li>1</li>    
					<li>2</li>    
					<li>3</li>    
					<li>4</li>    
					<li>5</li>    
					<div class="clearfix"></div>    
				</ul><!--pfxtMid/-->    
				<div class="pfxtRight"></div>    
				<div class="clearfix"></div>    
			</div><!--pingfenList/-->    
			<div class="pingfenList">    
				<div class="pfxtTitle">外观:</div>    
				<div class="pfxtText">你觉得这个创意在外观上优秀吗?</div>    
				<ul class="pfxtFen" title="双击取消评分">    
					<li>1</li>    
					<li>2</li>    
					<li>3</li>    
					<li>4</li>    
					<li>5</li>    
					<div class="clearfix"></div>    
				</ul><!--pfxtMid/-->    
				<div class="pfxtRight"></div>    
				<div class="clearfix"></div>    
			</div><!--pingfenList/-->    
			<div class="pingfenList">    
				<div class="pfxtTitle">成本:</div>    
				<div class="pfxtText">你觉得这个创意在成本上优秀吗?</div>    
				<ul class="pfxtFen" title="双击取消评分">    
					<li>1</li>    
					<li>2</li>    
					<li>3</li>    
					<li>4</li>    
					<li>5</li>    
					<div class="clearfix"></div>    
				</ul><!--pfxtMid/-->    
				<div class="pfxtRight"></div>    
				<div class="clearfix"></div>    
			</div><!--pingfenList/-->    
			<div class="pingfenList">    
				<div class="pfxtTitle">难度:</div>    
				<div class="pfxtText">你觉得这个创意在难度上可行吗?</div>    
				<ul class="pfxtFen" title="双击取消评分">    
					<li>1</li>    
					<li>2</li>    
					<li>3</li>    
					<li>4</li>    
					<li>5</li>    
					<div class="clearfix"></div>    
				</ul><!--pfxtMid/-->    
				<div class="pfxtRight"></div>    
				<div class="clearfix"></div>    
			</div><!--pingfenList/-->    
			<div class="clearfix"></div>    
		</div>    
	</body>    
</html>



用户 评分

jQuery实现用户体验调查评分特效

js+html5用户注册表单进度条提示特效代码

jquery网站功能引导用户提示操作

友荐云推荐
大家说 此评论不代表本站观点