html5星
① html5 星級評分怎麼做到顯示一半的
之前圖片就做成一半
使用了css中的裁剪屬性------>clip: rect();
② 在html上用 jquery 怎麼做評論星星
html部分:
<table class="block">
<tr>
<td>
<span class="label">總體評價<em>*</em>:</span>
</td>
<td>
<div class="rating-wrap">
<ul class="rating-wrap-ul" onmouseout="onUlMouseOut()" onmouseover="onUlMouseOver()">
<li><a class="one-star" title="很差" data-hint="很差" href="javascript:clickStar(1);" onmouseover="onLiMouseOver(1)" onmouseout="onLiMouseOut()"></a></li>
<li><a class="two-stars" title="差" data-hint="差" href="javascript:clickStar(2);" onmouseover="onLiMouseOver(2)" onmouseout="onLiMouseOut()"></a></li>
<li><a class="three-stars" title="還行" data-hint="還行" href="javascript:clickStar(3);" onmouseover="onLiMouseOver(3)" onmouseout="onLiMouseOut()"></a></li>
<li><a class="four-stars" title="好" data-hint="好" href="javascript:clickStar(4);" onmouseover="onLiMouseOver(4)" onmouseout="onLiMouseOut()"></a></li>
<li><a class="five-stars" title="很好" data-hint="很好" href="javascript:clickStar(5);" onmouseover="onLiMouseOver(5)" onmouseout="onLiMouseOut()"></a></li>
</ul>
</div>
<span id="ratingText" class="active-hint" innerText=""></span>
</td>
</tr>
<tr>
<td>
<span class="label">評價<em>*</em>:</span>
</td>
<td>
<span class="note">(50-2000個字)</span>
<span id="textCount" class="note" innerText=""></span>
</td>
</tr>
<tr>
<td>
</td>
<td>
<textarea name="appraiseText" id="appraiseText" class="form-content-block form-textarea" rows="12"></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td align="right">
<input type="button" value="提交" onclick="submitAppraise()">
<input type="button" value="關閉" onclick=" ">
</td>
</tr>
</table>
CSS:
body {
color: #333;
font: normal normal normal 12px/1.5 Arial, 宋體, sans-serif;
}
.block{
clear: both;
margin-bottom:20px;
margin-bottom: 10px;
zoom: 1;
padding:5px 11px;border:1px solid #F5EEE8;
padding-top:10px;margin:0 10px 0;
padding-bottom:20px;border-bottom:1px dashed #E4E4E4;
margin:10px auto;padding:0;border:none;
}
.label{
float:right;
margin-right: 10px;
text-align: right;
font-weight: normal;
font-style:normal;
width: 94px;
}
em{
margin-right:5px;
color:#c00;
font-weight:bold;
font-style:normal;
margin-left:2px;
}
.note {
color: #999;
}
.form-textarea{
float: left;
font-family: Tahoma, Geneva, sans-serif;
margin-right: 5px;
width: 598px;
zoom: 1;
font-family: inherit;
font-size: 100%;
-webkit-appearance: textarea;
-webkit-box-orient: vertical;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
background-color: white;
border: 1px solid;
cursor: auto;
padding: 2px;
resize: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
.rating-wrap {
display: inline-block;
float: left;
position: relative;
top: -2px;
width: 89px;
height: 20px;
margin-right: 5px;
padding: 4px 0 0 5px;
border: 1px solid #EFE0D7;
background: #FFF9F1;
z-index: 0;
}
.rating-wrap ul,.rating-wrap a:hover {
background-image: url(../images/star_shade.png);
background-repeat: no-repeat;
}
.rating-wrap ul {
-webkit-padding-start: 40px;
display: block;
list-style-type: disc;
margin: 1em 0px;
border: 0px;
margin: 0px;
outline: 0px;
padding: 0px;
list-style: none;
position: relative;
width: 85px;
height: 16px;
background-position: 0 -90px;
z-index: 10;
}
.rating-wrap li {
display: inline;
}
.rating-wrap a {
zoom: 1;
position: absolute;
left: 0;
top: 0;
display: block;
height: 16px;
}
.rating-wrap .five-stars {
width: 84px;
z-index: 10;
background-position: 0 0px;
}
.rating-wrap .four-stars {
width: 68px;
z-index: 20;
background-position: 0 -18px;
}
.rating-wrap .three-stars {
width: 51px;
z-index: 30;
background-position: 0 -36px;
}
.rating-wrap .two-stars {
width: 34px;
z-index: 40;
background-position: 0 -54px;
}
.rating-wrap .one-star {
width: 17px;
z-index: 50;
background-position: 0 -72px;
}
.active-hint{
color: #C00;
float: left;
padding-top:2px;
font-weight: normal;
font-style:normal;
}
JS:
$(document).ready(function(){
$("#appraiseText").bind("keydown", function(){
var count = $("#appraiseText").val().length;
if( count <= 200 ){
$("#textCount").html(" 還能輸入<font color='green'><b>" + (200 - count) + "</b></font>個字");
}else{
$("#textCount").html(" 已超出<font color='red'><b>" + (count - 200) + "</b></font>個字");
}
});
});
var starValue=0;
function onUlMouseOut(){
var y = -90 + starValue * 18;
var position = "0 " + y + "px";
$(".rating-wrap-ul").css({
"background-position" : position
});
}
function onUlMouseOver(){
$(".rating-wrap-ul").css({
"background-position" : "0 -90px"
});
}
function onLiMouseOver(grade){
switch(grade){
case 1 : document.getElementById("ratingText").innerHTML="很差";break;
case 2 : document.getElementById("ratingText").innerHTML="差";break;
case 3 : document.getElementById("ratingText").innerHTML="還行";break;
case 4 : document.getElementById("ratingText").innerHTML="好";break;
case 5 : document.getElementById("ratingText").innerHTML="很好";break;
default : document.getElementById("ratingText").innerHTML="";
}
}
function onLiMouseOut(){
onLiMouseOver(starValue);
}
function clickStar(grade){
starValue = grade;
var y = -90 + grade * 18;
var position = "0 " + y + "px";
$(".rating-wrap-ul").css({
"background-position" : position
});
}
希望能幫到你
③ 5星圖是哪些
傳統的玉文化講的就是吉祥和喜慶了,而玉石的雕工主要是從三個方面體現:圖案本身的寓意,諧音以及吉祥紋.周倉簡單的把這些歸納成五個方面---五福論玉.當然玉雕千變萬化,遠遠不止這些,以後將慢慢論述.
1. 福:蝙蝠 狐狸 葫蘆 茶壺 佛手 蝴蝶.......
蝙蝠---福到了或是天賜福緣;狐狸---福壽雙全;葫蘆----多子多福,萬代盤長,福緣深厚,福滿乾坤;佛手---得心應手,福壽雙全;茶壺---啟福迎祥;蝴蝶---富貴耄耋.......(蝙蝠抱葫蘆的掛件可以說成是五福臨門:福到了,天賜福緣,福滿乾坤,福緣深厚,納福迎祥)(多發揮一下想像力是掌握玉雕的關鍵).....
2. 祿:鹿 公雞 蠍子 仙鶴 猴 獅......
高官厚祿(公雞 鹿) 官上加官(公雞 雞冠花) 甲天下(蠍子) 五子登科(五隻小雞) 一路連科(鷺鷥 蓮葉 桂圓) 馬上封侯(馬 猴) 太師少獅(大小獅) 一品當朝(仙鶴)......
3.壽:壽桃 烏龜 仙鶴 松樹 茄子 海棠 白頭翁 朱雀 玄武 八仙 柏 南極仙翁 麻姑 彭祖 東方朔.....
這里常見的就不羅嗦了,僅舉幾例:茄子(又長又瘦就是長壽了);堂上雙白(海棠,兩只白頭翁);玄武悲泣(龍龜);朱雀拒屍(朱雀)....
4.喜:喜鵲 辣椒 蜘蛛 豹 荔枝.......
蜘蛛(知足長樂 喜從天降) 辣椒(紅紅火火) 鴻福齊天(辣椒 蜘蛛) 竹報平安(竹節 銅錢 豹) 豹(捷報頻傳).......
5.財:白菜 金蟾 貔貅 甲蟲 螃蟹 搖錢樹 聚寶盆......
這里只說一點,金蟾是吐錢的,擺時口要朝家裡,貔貅則剛剛相反......
五星圖就是指以上五星
④ html5的星星怎麼變圓潤點
border-radius 這個屬性可以設置邊角圓潤，W3c裡面一查就明白了
⑤ 淘寶5星多少好評
需要151分-250分的信用評價。在交易中作為賣家的角色，其信用度分為以下級別：
（1）4-10分：1顆心。
（2）11-40分：2顆心。
（3）41-90分：3顆心。
（4）91-150分：4顆心。
（5）151-250分：5顆心。
（6）251-500分：1顆藍鑽。
（7）501-1000分：2顆藍鑽。
（8）1001-2000分：3顆藍鑽。
（9）2001-5000分：4顆藍鑽。
（10）5001-10000分：5顆藍鑽。
（11）10001-20000分：1顆藍冠。
（12）20001-50000分：2顆藍冠。
（13）50001-100000分：3顆藍冠。
（14）100001-200000分：4顆藍冠。
（15）200001-500000分：5顆藍冠。
(5)html5星擴展閱讀：
作為買家：在淘寶集市和商城購物，每一筆交易成功，即可以獲得一個評價機會，「好評」加一分、「中評」不加分、「差評」減一分。買家信用等級點擊這里查看。
作為賣家：誠信經營，把店鋪裝修的漂亮一點，把好產品的質量關，並多做一些店鋪推廣的活動，相信您店鋪的流量及生意將源源不絕，賣出的寶貝多了，信用分也就會不停的往上累積哦。賣家信用等級點擊這里查看。
⑥ jquery+html5實現3d立體星星動畫效果怎麼換圖
沒有代碼沒發給你解釋，因為不同人寫程序的思路可能不太一樣
⑦ html5有什麼優勢
一、跨平台：跨平台技術在早期大多因為性能問題夭折，但中後期硬體能力增強後又會占據主流，因為跨平台確實是剛需。
二、快速迭代：移動互聯網是一個快魚吃慢魚的時代，誰對用戶的需求滿足的更快，誰的試錯成本更低，誰就擁有巨大的優勢。
三、持續交付：很多人有這樣的體會，一個原生應用上線Appstore，突然有一個大bug，只好連夜加班修復，然後靜靜等待2周或更長時間Apple審核，這2個星期被用戶的塗抹淹死，市場上一片差評，用戶大量流失。等新應用被審核上線了，用戶已經卸載了。但是，HTML5沒有這些問題，你可以實時更新，有問題立即響應。
四、大幅下降成本：創業者融資並不容易，如何花錢更高效非常重要。如果你使用原生開發的App和競爭對手使用HTML5開發的App沒什麼區別，但你的開發成本高出一倍，我相信沒有投資人會喜歡給你投錢。
五、開源生態系統發達：HTML5前端是開放的正反饋循環生態系統，大量的開源庫可以使用，開發應用變得更輕松、更敏捷，當然這也體現在了快速迭代和成本下降上。不過更重要的是，這種開放的正反饋循環生態系統未來的生命力是比原生生態系統更強勁的。
六、開放的數據交換：HTML是以page為單元開放代碼的，它無需專門開發SDK，只要不混淆，就能與其他應用交互數據。開發者可以讓手機搜索引擎很容易檢索到自己的數據，也更容易通過跨應用協作來滿足最終用戶需求。
七、更容易推廣、更容易爆發：導流入口多：HTML5應用導流非常容易，超級App(如微信朋友圈)、搜索引擎、應用市場、瀏覽器，到處都是HTML5的流量入口。而原生App的流量入口只有應用市場。聰明的HTML5開發者當然會玩轉各種流量入口從而取得更強的優勢。
八、對最終用戶的三大優勢：①大幅降低使用門檻②實時更新、差量更新的優秀體驗③跨應用的使用體驗