版权声明:当老鼠嘲笑猫的时候,身旁必有一个洞。 https://blog.csdn.net/qq_41138935/article/details/85041454
源代码下载:一个漂亮的移动端评价页面
效果图:
这个水印影响效果了。
源代码下载:一个漂亮的移动端评价页面
文件结构图:
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>评价</title>
<link rel="stylesheet" href="css/new_file.css" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
</head>
<body>
<!--头部 star-->
<header>
<a href="javascript:history.go(-1);">
<div class="_left"><img src="images/left.png"></div>
评价
</a>
</header>
<!--头部 end-->
<!--内容 star-->
<div class="contaniner fixed-cont">
<!--1-->
<section class="assess">
<p>
<textarea rows="7" placeholder="请写下对商品的感受吧,对我们帮助很大哦~~blog.wybing.com"></textarea>
</p>
<ul>
<li>评价</li>
<li class="assess-right">
<div><input type="radio" name="radio" value="radio1"/><img src="images/hua.png"/></div>
<div><input type="radio" name="radio" value="radio2"/><img src="images/huah.png"/></div>
<div><input type="radio" name="radio" value="radio3"/><img src="images/huae.png"</div>
</li>
</ul>
</section>
<!--2-->
<section class="main">
<div class="main-wrap">
<span class="revtit">综合评分:</span>
<div id="mydiv1" currentIndex="0" class="mydiv">
<ul class="star_ul">
<li num="1"><img src="images/star_empty.png" class="xing_hui"/></li>
<li num="2"><img src="images/star_empty.png" class="xing_hui"/></li>
<li num="3"><img src="images/star_empty.png" class="xing_hui"/></li>
<li num="4"><img src="images/star_empty.png" class="xing_hui"/></li>
<li num="5"><img src="images/star_empty.png" class="xing_hui"/></li>
</ul>
</div>
</div>
<div class="main-wrap">
<span class="revtit">基本素质:</span>
<div id="mydiv2" currentIndex="0" class="mydiv">
<ul class="star_ul">
<li num="1"><img src="images/star_empty.png" class="xing_hui"/></li>
<li num="2"><img src="images/star_empty.png" class="xing_hui"/></li>
<li num="3"><img src="images/star_empty.png" class="xing_hui"/></li>
<li num="4"><img src="images/star_empty.png" class="xing_hui"/></li>
<li num="5"><img src="images/star_empty.png" class="xing_hui"/></li>
</ul>
</div>
</div>
<div class="main-wrap">
<span class="revtit">仪容着装:</span>
<div id="mydiv3" currentIndex="0" class="mydiv">
<ul class="star_ul">
<li num="1"><img src="images/star_empty.png" class="xing_hui"/></li>
<li num="2"><img src="images/star_empty.png" class="xing_hui"/></li>
<li num="3"><img src="images/star_empty.png" class="xing_hui"/></li>
<li num="4"><img src="images/star_empty.png" class="xing_hui"/></li>
<li num="5"><img src="images/star_empty.png" class="xing_hui"/></li>
</ul>
</div>
</div>
</section>
</div>
<!--内容 end-->
<!--底部 star-->
<footer class="assess-footer fixed-footer ">
<ul>
<li>
<input type="checkbox" id="ass" />
<label for="ass" onselectstart="return false">匿名评价</label>
</li>
<input type="button" value="发表评论" />
</ul>
</footer>
<!--底部 end-->
<script type="text/javascript">
$(".assess-footer ul li label").on('touchstart',function(){
if($(this).hasClass('assd')){
$(".assess-footer ul li label").removeClass("assd")
}else{
$(".assess-footer ul li label").addClass("assd")
};
});
//匿名评价
var isclick = false;
function change(mydivid,num) {
if (!isclick) {
var tds = $("#"+mydivid+" ul li");
for (var i = 0; i < num; i++) {
var td = tds[i];
$(td).find("img").attr("src","images\/star_full.png");
}
var tindex = $("#"+mydivid).attr("currentIndex");
tindex = tindex==0?0:tindex+1;
for (var j = num; j < tindex; j++) {
var td = tds[j];
$(td).find("img").attr("src","images\/star_empty.png");
}
$("#"+mydivid).attr("currentIndex",num);
}
}
function repeal(mydivid,num) {
if (!isclick) {
var tds = $("#"+mydivid+" ul li");
var tindex = $("#"+mydivid).attr("currentIndex");
tindex = tindex==0?0:tindex+1;
for (var i = tindex; i < num; i++) {
var td = tds[i];
$(td).find("img").attr("src","images\/star_empty.png");
}
$("#"+mydivid).attr("currentIndex",num);
}
}
function change1(mydivid,num) {
if (!isclick) {
change(mydivid,num);
}
else {
alert("Sorry,You had clicked me!");
}
}
$(function(){
initEvent('mydiv1');
initEvent('mydiv2');
initEvent('mydiv3');
});
function initEvent(mydivid) {
var tds = $("#"+mydivid+" ul li");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
$(td).live('mouseover',function(){var num = $(this).attr("num");change(mydivid,num);});
$(td).live('click',function(){var num = $(this).attr("num");change1(mydivid,num);});
}
}
</script>
</body>
</html>
jquery 1.9+ 以后移除了live方法,以后的版本请使用on方法代替。
$(td).on('mouseover',function() {
var num = $(this).attr("num");change(mydivid,num);
});
$(td).on('click',function() {
var num = $(this).attr("num");change1(mydivid,num);
});
CSS代码:
html {
font-size: 125%; /* 20梅16=125% min-font-size:12px bug*/
}
@media only screen and (min-width: 481px) {
html {
font-size: 188%!important; /* 30.08梅16=188% */
}
}
@media only screen and (min-width: 561px) {
html {
font-size: 218%!important; /* 38.88梅16=218% */
}
}
@media only screen and (min-width: 641px) {
html {
font-size: 250%!important; /* 40梅16=250% */
}
}
body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 1em;
font: inherit;
vertical-align: baseline;
font-family: "Microsoft YaHei"
}
body {
font-family: "Microsoft YaHei";
font-size: 0.7rem;
color: #333;
line-height: 0.7rem;
width: 100%;
background: #f2f2f2;
}
em {
font-style: normal
}
li {
list-style: none
}
a {
text-decoration: none;
outline: 0;
color: #333;
}
img {
border: none;
vertical-align: top;
}
table {
border-collapse: collapse;
}
input, textarea {
font-family: "Microsoft YaHei";
padding: 0;
}
textarea {
resize: none;
overflow: auto;
}
textarea:focus {
outline: none;
}
input:focus {
outline: none;
}
.clear {
zoom: 1
}
.clear:after {
content: "";
display: block;
clear: both;
}
.fl {
float: left
}
.fr {
float: right
}
/*************************************页面开始************************************/
header{
background: #FFFFFF;
width: 100%;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
font-size: 0.9rem;
position: fixed;
left: 0;
top: 0;
z-index: 97;
}
header a{
color: ##333333;
}
header ._left {
display: block;
position: absolute;
left: 0;
top: 0;
}
header ._left img {
height: 1rem;
margin: 0.75rem 0 0 0.6rem;
}
.contaniner {
width: 100%;
overflow: hidden;
}
.fixed-cont {
margin-top: 15%;
margin-bottom: 20%;
}
.assess {
width: 100%;
}
.assess p {
width: 92%;
padding: 4%;
overflow: hidden;
background-color: #fff;
}
.assess p textarea {
float: right;
text-align: justify;
width: 100%;
border: none;
font-size: 0.9em;
color: #666;
}
.assess ul {
width: 90%;
padding: 2% 5%;
background-color: #fff;
overflow: hidden;
margin-top: 3%;
}
.assess ul li {
float: left;
font-size: 0.9em;
color: #666;
}
.assess ul .assess-right {
float: right;
width: 40%;
overflow: hidden;
}
.assess-right div{
width: 32%;
float: left;
text-align: center;
display: flex;
}
.assess-footer {
width: 100%;
background-color: #fff;
overflow: hidden;
}
.fixed-footer {
position: fixed;
bottom: 0;
left: 0;
}
.assess-footer li {
position: relative;
float: left;
width: 70%;
padding: 3% 0;
}
.assess-footer li input[type="checkbox"] {
opacity: 0;
position: absolute;
top: 40%;
left: 0;
}
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
padding: 0;
margin: 3px;
}
.assess-footer li label {
width: 80%;
padding-left: 20%;
font-size: 0.9em;
color: #666;
display: block;
background: url(../images/check.png) no-repeat;
background-size: 6%;
background-position: 10%;
-moz-user-select: none;
}
.assess-footer li .assd{
width: 80%;
padding-left: 20%;
font-size: 0.9em;
color: #666;
display: block;
background: url(../images/checke.png) no-repeat;
background-size: 6%;
background-position: 10%
}
.assess-footer input[type="button"] {
float: right;
width: 30%;
padding: 3% 0;
text-align: center;
color: #fff;
background-color: #ff0082;
border: none;
font-size: 0.9em;
}
.main {
width: 100%;
margin: 0.2rem auto;
background: #FFFFFF;
}
.main span {
line-height: 1.5rem;
}
.main-wrap{
padding: 0.1rem 0 0.1rem 0.5rem;
}
.mydiv {
display: inline-block;
}
.main ul {
list-style-type: none;
overflow: hidden;
}
.star_ul li {
margin-right: 0.3rem;
float: left;
}
.star_ul img {
width: 0.8rem;
height: 0.8rem;
vertical-align: text-bottom;
}