jQuery基于ajax實(shí)現(xiàn)星星評(píng)論代碼
本文實(shí)例講述了jQuery基于ajax實(shí)現(xiàn)星星評(píng)論代碼。分享給大家供大家參考。具體如下:
這里使用jquery模仿點(diǎn)評(píng)網(wǎng)的星星評(píng)論功能,Ajax評(píng)論模塊,鼠標(biāo)點(diǎn)擊星星即可評(píng)價(jià),下邊是分?jǐn)?shù),可以點(diǎn)擊后給分,網(wǎng)上很流行的效果,本代碼相對(duì)完整,相信很多朋友會(huì)喜歡的。
先來看看運(yùn)行效果截圖:
具體代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>jquery點(diǎn)評(píng)網(wǎng)星星評(píng)論</TITLE> <style> body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;} ul,ol,li{list-style:none;} input,button{margin:0;font-size:12px;vertical-align:middle;} body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:left; margin:0 auto;} table{border-collapse:collapse;border-spacing:0;} b,em,i{ font-style:normal; font-weight:normal;} h1,h2,h3,h4{ font-size:14px;} h5{ font-size:12px;} h6{ font-size:12px;font-style:normal;} .fl{ float: left; display: inline;} .box_163css{ width: 480px;margin:20px auto; height: 30px;} .s_name{ float:left; display: block; width: 60px; padding-top: 4px; text-align: right;} .star_ul{background: url(//img.jbzj.com/file_images/article/201508/201587170508564.png) no-repeat 0 -150px; width: 132px; z-index: 10; position: relative; height: 25px;} .star_ul li{ float: left; margin-right:1px;width: 25px; height: 25px; } .star_ul li a{ display: block; height: 25px; position: absolute; left: 0; top: 0; text-indent: -999em;} .star_ul li .active-star{background: url(//img.jbzj.com/file_images/article/201508/201587170508564.png) no-repeat;} .star_ul li .one-star{width: 25px;background-position:0 -120px; z-index: 50;} .star_ul li .two-star{width: 51px;background-position:0 -90px;z-index: 40;} .star_ul li .three-star{width:79px; background-position:0 -60px;z-index: 30;} .star_ul li .four-star{width:105px; background-position:0 -30px;z-index: 20;} .star_ul li .five-star{width:129px; margin-right: 0; background-position:0 0;z-index: 10;} .s_result{ padding: 6px 0 0 5px; } .square_ul{background: url(//img.jbzj.com/file_images/article/201508/201587170508564.png) no-repeat 0 -222px; width: 146px; z-index: 10; position: relative; height: 20px;} .square_ul li{ float: left; margin-right:1px;width: 29px; height: 20px; } .square_ul li a{ display: block; height: 20px; position: absolute; left: 0; top: 0; text-indent: -999em;} .square_ul li .active-square{background: url(//img.jbzj.com/file_images/article/201508/201587170508564.png) no-repeat;} .square_ul li .square-1{width: 29px;background-position:0 -243px; z-index: 50;} .square_ul li .square-2{width: 58px;background-position:0 -264px;z-index: 40;} .square_ul li .square-3{width:87px; background-position:0 -285px;z-index: 30;} .square_ul li .square-4{width:116px; background-position:0 -306px;z-index: 20;} .square_ul li .square-5{width:145px; margin-right: 0; background-position:0 -327px;z-index: 10;} .s_result_square{padding: 4px 0 0 9px; } </style> <SCRIPT src="jquery-1.6.2.min.js" type=text/javascript></SCRIPT> </HEAD> <script type="text/javascript"> $(function(){ $('.star_ul a').hover(function(){$(this).addClass('active-star');$('.s_result').css('color','#c00').html($(this).attr('title'))},function(){$(this).removeClass('active-star');$('.s_result').css('color','#333').html('請(qǐng)打分')}); $('.star_ul a').click(function(){ alert($('.s_result').html()); }) $('.square_ul a').hover(function(){$(this).addClass('active-square');$(this).parents('.box_163css').find('.s_result_square').css('color','#c00').html($(this).attr('title'))},function(){$(this).removeClass('active-square');$(this).parents('.box_163css').find('.s_result_square').css('color','#333').html('請(qǐng)打分')}); $('.square_ul a').click(function(){ alert($(this).parents('.box_163css').find('.s_result_square').html()); }) }) </script> <BODY> <div class="box_163css"> <span class="s_name">總體評(píng)價(jià):</span> <ul class="star_ul fl"> <li><a class="one-star" title="很差" href="#"></a></li> <li><a class="two-star" title="差" href="#"></a></li> <li><a class="three-star" title="還行" href="#"></a></li> <li><a class="four-star" title="好" href="#"></a></li> <li><a class="five-star" title="很好" href="#"></a></li> </ul> <span class="s_result fl">請(qǐng)打分</span> </div> <div class="box_163css"> <span class="s_name">口味:</span> <ul class="square_ul fl"> <li><a class="square-1" title="差" href="#"></a></li> <li><a class="square-2" title="一般" href="#"></a></li> <li><a class="square-3" title="好" href="#"></a></li> <li><a class="square-4" title="很好" href="#"></a></li> <li><a class="square-5" title="非常好" href="#"></a></li> </ul> <span class="s_result_square fl">請(qǐng)打分</span> </div> <div class="box_163css"> <span class="s_name">環(huán)境:</span> <ul class="square_ul fl"> <li><a class="square-1" title="差" href="#"></a></li> <li><a class="square-2" title="一般" href="#"></a></li> <li><a class="square-3" title="好" href="#"></a></li> <li><a class="square-4" title="很好" href="#"></a></li> <li><a class="square-5" title="非常好" href="#"></a></li> </ul> <span class="s_result_square fl">請(qǐng)打分</span> </div> <div style="text-align:center;clear:both"> </div> </BODY> </HTML>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
- jquery 新浪網(wǎng)易的評(píng)論塊制作
- jquery實(shí)現(xiàn)仿新浪微博評(píng)論滾動(dòng)效果
- 基于jquery實(shí)現(xiàn)ajax無刷新評(píng)論
- jQuery實(shí)現(xiàn)的簡單無刷新評(píng)論功能示例
- jQuery 實(shí)現(xiàn)評(píng)論等級(jí)好評(píng)差評(píng)特效
- JQuery實(shí)現(xiàn)動(dòng)態(tài)添加刪除評(píng)論的方法
- PHP結(jié)合jQuery實(shí)現(xiàn)的評(píng)論頂、踩功能
- C#使用jQuery實(shí)現(xiàn)無刷新評(píng)論提交的方法
- 基于jQuery實(shí)現(xiàn)的美觀星級(jí)評(píng)論打分組件代碼
- jQuery實(shí)現(xiàn)簡單評(píng)論區(qū)
相關(guān)文章
EasyUI Pagination 分頁的兩種做法小結(jié)
這篇文章主要介紹了EasyUI Pagination 分頁的兩種做法小結(jié)的相關(guān)資料,需要的朋友可以參考下2016-07-07jQuery擴(kuò)展+xml實(shí)現(xiàn)表單驗(yàn)證功能的方法
這篇文章主要介紹了jQuery擴(kuò)展+xml實(shí)現(xiàn)表單驗(yàn)證功能的方法,涉及jQuery操作xml格式數(shù)據(jù)及表單驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下2016-12-12jq源碼解析之綁在$,jQuery上面的方法(實(shí)例講解)
下面小編就為大家?guī)硪黄猨q源碼解析之綁在$,jQuery上面的方法(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10jQuery實(shí)現(xiàn)表頭固定效果的實(shí)例代碼
jQuery實(shí)現(xiàn)表頭固定效果的實(shí)例代碼,需要的朋友可以參考一下2013-05-05jQuery Easyui datagrid行內(nèi)實(shí)現(xiàn)【添加】、【編輯】、【上移】、【下移】
本篇文章主要介紹jQuery Easyui datagrid行內(nèi)實(shí)現(xiàn)【添加】、【編輯】、【上移】、【下移】 。datagrid現(xiàn)在具有行編輯能力了,可以添加和編輯數(shù)據(jù),同時(shí)對(duì)行內(nèi)數(shù)據(jù)上移下移。2016-12-12jQuery彈性滑動(dòng)導(dǎo)航菜單實(shí)現(xiàn)思路及代碼
用一個(gè)絕對(duì)定位的div作為動(dòng)畫滑塊,改變它的left屬性來呈現(xiàn)動(dòng)畫效果javascript:hover()觸發(fā)移動(dòng)鼠標(biāo)到導(dǎo)航nav的動(dòng)作,和移出導(dǎo)航nav的動(dòng)作2013-05-05