js 評價星級效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="Jquery五角星打分效果,Jquery評分效果,Jq評分插件" />
<meta name="description" content="Jquery流行的五角星評分效果" />
<meta name="application-name" content="Jquery五角星評分效果-彭亞歐我的博客代碼中心" />
<title>Jquery五角星評分效果</title>
<style type="text/css">
#typeone {
width:
}
.formItemDiff {
width: 20px;
height: 20px;
background-image: url(diff.png);
background-position: 0px -575px;
float: left;
margin-top: 15px;
}
.formItemDiffFirst {
margin-left: 20px;
}
</style>
</head>
<body>
<div id="contentMain">
<div id="contextBg">
<div class="contextBgItem contextBgItemRight">
<div id="Demo" style="text-align:center;">
<div class="item" style="margin-top:100px; margin-left:100px;">
<div class="formItemDiff formItemDiffFirst"></div>
<div class="formItemDiff"></div>
<div class="formItemDiff"></div>
<div class="formItemDiff"></div>
<div class="formItemDiff"></div>
<p id="pointP" style="float:left; margin-left:20px;"></p>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="http://www.pengyaou.com/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".formItemDiff").hover(function() {
$(this).css("background-position", "0px -555px");
$(this).prevAll().css("background-position", "0px -555px");
$(this).nextAll().css("background-position", "0px -575px");
$("#pointP").html($(this).prevAll().length+1+"分");
});
});
</script>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="Jquery五角星打分效果,Jquery評分效果,Jq評分插件" />
<meta name="description" content="Jquery流行的五角星評分效果" />
<meta name="application-name" content="Jquery五角星評分效果-彭亞歐我的博客代碼中心" />
<title>Jquery五角星評分效果</title>
<style type="text/css">
#typeone {
width:
}
.formItemDiff {
width: 20px;
height: 20px;
background-image: url(diff.png);
background-position: 0px -575px;
float: left;
margin-top: 15px;
}
.formItemDiffFirst {
margin-left: 20px;
}
</style>
</head>
<body>
<div id="contentMain">
<div id="contextBg">
<div class="contextBgItem contextBgItemRight">
<div id="Demo" style="text-align:center;">
<div class="item" style="margin-top:100px; margin-left:100px;">
<div class="formItemDiff formItemDiffFirst"></div>
<div class="formItemDiff"></div>
<div class="formItemDiff"></div>
<div class="formItemDiff"></div>
<div class="formItemDiff"></div>
<p id="pointP" style="float:left; margin-left:20px;"></p>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="http://www.pengyaou.com/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".formItemDiff").hover(function() {
$(this).css("background-position", "0px -555px");
$(this).prevAll().css("background-position", "0px -555px");
$(this).nextAll().css("background-position", "0px -575px");
$("#pointP").html($(this).prevAll().length+1+"分");
});
});
</script>
</html>
相關文章
- 1. 純CSS的星級評價效果
- 2. Vue實現星級評價效果
- 3. JS實現星級評價
- 4. html+js+jquary完成的五星評分（評價效果demo）
- 5. js寫評價的星星
- 6. 評價中的星效果實現
- 7. 五星級評價
- 8. js實現五星評分的效果
- 9. mui星級評價模塊
- 10. JQ CSS星級評價
- 更多相關文章...
- • SVG 模糊效果 - SVG 教程
- • XML DOM 高級 - XML 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 純CSS的星級評價效果
- 2. Vue實現星級評價效果
- 3. JS實現星級評價
- 4. html+js+jquary完成的五星評分（評價效果demo）
- 5. js寫評價的星星
- 6. 評價中的星效果實現
- 7. 五星級評價
- 8. js實現五星評分的效果
- 9. mui星級評價模塊
- 10. JQ CSS星級評價