jQuery使用者數字評分效果

阿新 • • 發佈：2019-01-18

<!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>

jQuery使用者數字評分效果

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery使用者數字打分評分程式碼 - HoverTree</title><base

一款基於jQuery Ajax的等待效果

通過 all dem 自定義函數 position images .sh new pad 特別提示：本人博客部分有參考網絡其他博客，但均是本人親手編寫過並驗證通過。如發現博客有錯誤，請及時提出以免誤導其他人，謝謝！歡迎轉載，但記得標明文章出處：http://www.cnb

jQuery實現輪播效果(一) - 基礎

時代例如自己 -1 fun 時間間隔 order .html 官方前戲： XXXX年XX月XX日，經理交給我一個站點新聞資訊網頁開發的活兒。我一個java程序猿，怎麽完畢得了網頁設計這樣高端的活兒呢！之前盡管有學過一點HTML。CSS的知識。可

JQuery——banner旋轉木馬效果

pict bsp 比例 index containe flag ttr nbsp alt 博主在瀏覽網頁時無意間發現了一種banner圖的輪播方式——像旋轉木馬一樣的輪播方式，博主感覺非常新穎獨特，經過查閱資料，觀看某課網教程總算搞了出來的，其原理主要利用了JQuery代碼

【前端】用jQuery實現瀑布流效果

scrollto title n) 個性避免 ive gets type turn jQuery實現瀑布流效果何為瀑布流：　　瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊並附加

js實現星級評分效果（最短代碼）

實現動態顯示 turn 單行 ctype ref sts near 分系統 1. 前言此方案受到JS單行寫一個評級組件啟發，自己寫了一個簡單Demo。功能有正常滑動，動態顯示實心星星個數；當點擊確認，則保持當前的實心星星個數；再移動時為點擊，則離開後還是保持之前的狀態

jquery實現圖片放大效果

jquery實現圖片放大效果好久沒更新了，先來一發關於jquery圖片放大縮小的代碼直接上代碼前端頁面：<tr> <td height="30" align="right" bgcolor="#f2f2f2" class="left_txt2">產品相冊</td>

【前端】javascript+jQuery實現旋轉木馬效果輪播圖slider

pad 語句 borde nbsp strong 調用 define ide right 實現效果：實現原理：技術棧: javascript+jQuery+html+css 實現步驟： // 0. 獲取元素 // 1. 鼠標放置到輪播圖上，顯示兩側的

jQuery實現的手風琴效果

wrap this utf wid src sele height add doc 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UT

jQuery實現的打字機效果

indexof pos 元素 == ctype string 打字 int jquer 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5

楊老師課堂之Jquery的篩選,事件,效果,Ajax,javascript跨域)

1 篩選[掌握]  篩選與之前“選擇器”雷同，篩選提供函式 1.1 過濾 eq(index|-index)，獲取第N個元素 •index：一個整數，指示元素基於0的位置,這個元素的位置是從0算起。 •-index：一個整數，指示元素的位置，從集合中的最後一個元素開

基於jQuery的瀑布流效果

基於jQuery的瀑布流效果設計思想：利用元素的絕對定位來實現瀑布流效果。其中頁面滾動到底部可以按需求載入更多，可以自定義每列的寬度，且可以通過改變頁面的寬度來重置列數，且列數切換時通過動畫過渡。實現程式碼： 1.css *{margin:0; padding:0;} bo

jQuery學習筆記-2-效果

效果本章主要記錄jQuery效果，這些內容來自學習的網上的一些資料。隱藏、顯示、切換，滑動，淡入淡出，以及動畫一.隱藏/顯示：一個hide()例項。演示如何隱藏文字。 <!DOCTYPE html> <html> <he

JQuery中的動畫效果

show() hide() slideUp slideDown fadeIn fadeOut animate : 自定義動畫 JQuery中的動畫效果.html <!DOCTYPE html> <html> <head> <m

星星評分效果

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <link href="style.css" rel="stylesheet" ty

jquery tabs選項卡效果

<div class="liuxueContent"> //觸發物件，既滑鼠點選物件 <ul class="liuxueMenu" id="liuxueMenu"> <li class="liuxueMenuItem active" da

jQuery 阿拉伯數字轉繁體中文

網上很多，但都好複雜，所以特意寫了個，以供參考，思路簡單明瞭，通俗易懂，如若喜歡別忘了點個關注哦 <!doctype html> <html> <head> <meta charset="utf-8"> <title

jQuery實現載入中效果,防止重複提交

//匯出表格載入中的提示var dian=0;//控制'●'的個數var t=null;//停止時使用function id_loadspot(loadspotSpan,loadingDiv,exportLink){ 　　loadingDiv.css('visibility','visible');//顯示

jQuery fadeIn淡入效果

jQuery - fadeIn淡入效果[示例程式碼]<html> <head><scriptsrc="jquery-1.3.1.js"></script><script> $(docume

炫酷的圓環載入及數字滾動效果（上）

實際專案開發時候需要實現圓環載入及數字滾動的效果,接下來分享下自己的實現思路和做法。數字的滾動的實現思路 vue本身就是根據資料來驅動view層的顯示,實現數字的滾動本質就是設定一個延遲函式改變資料的同時，view層的顯示也會隨著改變達到漸變的效果。元件化為了考慮多種使用場景，將

jQuery使用者數字評分效果

相關推薦