jQuery使用者數字評分效果

weixin_34067049發表於2015-06-08
jQuery

 

效果預覽：http://hovertree.com/texiao/jquery/5.htm

HTML檔案程式碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery使用者數字打分評分程式碼 - HoverTree</title><base target="_blank" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: "微軟雅黑";
}

ul {
list-style: none;
}
/*使用者評分*/
.hovertreepingfen {
padding: 15px 0;
width: 1200px;
margin: 0 auto;
}

.pingfenList {
float: left;
width: 500px;
padding-right: 20px;
}

.pfxtTitle {
font-weight: bold;
font-size: 1.2em;
padding: 4px 0;
}

.pfxtText {
line-height: 25px;
}

.hovertreepful {
margin: 10px 0;
}

.hovertreepful li {
float: left;
width: 98px;
height: 30px;
text-align: center;
line-height: 30px;
border: #ddd 1px solid;
background: #f1f1f1;
cursor: pointer;
}

.hovertreepful li.pfxtCur {
background: #308A95;
color: #fff;
border: #308A95 1px solid;
}
.hvtclear{width:100%;clear:both;}
.hvtblock{clear:both;width:800px;margin:5px auto;}
a{color:blue;}
</style>
</head>
<body>
<!--使用者評分程式碼-->
<div class="hovertreepingfen">

<div class="pingfenList">

<div class="pfxtTitle">功能：</div>
<div class="pfxtText">你覺得這個創意在功能上優秀嗎？</div>
<ul class="hovertreepful">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>

</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="hovertreepful">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>

</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="hovertreepful">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>

</ul><!--pfxtMid/-->
<div class="pfxtRight"></div>
<div class="clearfix"></div>
</div><!--pingfenList/-->

<div class="pingfenList">
<div class="pfxtTitle">難度：</div>
<div class="pfxtText">你覺得這個HoverTree網站的難度大嗎？</div>
<ul class="hovertreepful">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li> 
</ul><!--pfxtMid/-->
<div class="pfxtRight"></div>
<div class="clearfix"></div>
</div><!--pingfenList/-->

<div class="clearfix"></div>

</div><!--hovertreepingfen/-->
<!--使用者評分程式碼-->
<div class="hvtclear"></div>
<div class="hvtblock">
<textarea id="result_hovertree_com" rows="5" cols="30"></textarea>
<input type="button" id="clear_hovertree_com" value="清空" />
<input type="button" id="sumit_hovertree_com" value="提交" />
<a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/hvtart/bjae/m8wrrmrw.htm">原文</a> <a href="http://hovertree.com/texiao/">特效庫</a> <a href="http://keleyi.com">柯樂義</a>
<br />先打分，然後再點選提交按鈕
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';clear:both;">
<br /><h2>HoverTree使用者數字打分評價特效</h2>
<p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲遊、搜狗、世界之窗.</p>
<p>來源：<a href="http://hovertree.com/" target="_blank">HoverTree</a></p>
</div>

<script>
$(function () {

//簡潔使用者評分程式碼
$(".hovertr"+"eepful li").click(function () {
$(this).addClass("pfxtCur");
$(this).prevAll().addClass("pfxtCur");
$(this).nextAll().removeClass("pfxtCur");
});

$("#clear_h"+"overtree_com").on("click", function () {
$(".hovertreepful li").removeClass("pfxtCur");
$("#result_hovertree_com").val('');
})

$("#sumit_hover"+"tree_com").on("click", function () {
var hovertreeul = $(".hovertreepful");
var hovertreecount = hovertreeul.length;
var hovertreeresult = $("#result_hovertree_com");
hovertreeresult.val('');
for (i = 0; i < hovertreecount; i++)
{
hovertreeresult.val(hovertreeresult.val() + hovertreeul.eq(i).find(".pfxtCur:last").text() + '\n');
}
})

})
</script>
</body>
</html>

 

參考：
http://hovertree.com/hvtart/bjae/6asqg23w.htm
http://hovertree.com/hvtart/bjae/vugyl6v3.htm
http://keleyi.com/a/bjac/tmx4mq76.htm

web前端彙總：

http://www.cnblogs.com/jihua/p/webfront.html

相關文章