您好,登錄后才能下訂單哦!
剛開始接觸寫星星評(píng)價(jià)時(shí),哇!估計(jì)腦子剛被驢踢了,竟然想到了最笨的辦法-手工畫五角星。媽呀! css樣式都寫了好大一串,還沾沾自喜終于畫出來了,然后瞅一瞅旁邊的妹子寫得怎么樣了,哇!人家機(jī)智的!直接用符號(hào)★就解決了?。?!唉,智商捉急呀!
先上圖看看吧:
雖然簡(jiǎn)單,還是有幾個(gè)注意的地方:
1. 未點(diǎn)擊時(shí)的hover效果,星星會(huì)隨鼠標(biāo)移動(dòng)亮起來喔。
2. 點(diǎn)擊后關(guān)閉hover效果。
3. 點(diǎn)擊同一顆星星,星星可以隨時(shí)換色。
具體代碼展示:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <style type="text/css"> .stars{ white-space: nowrap; text-align: center; margin-top: 20px; margin-bottom: 20px; } .stars li{ display: inline-block; color: #ADADAD; font-size: 40px; } </style> <body> <ul class="stars"> <li>★</li> <li>★</li> <li>★</li> <li>★</li> <li>★</li> </ul> <script src="../../js/common/jquery-git.js"></script> <script> $(function() { //為星星設(shè)置hover效果 var isClicked = false; var beforeClickedIndex = -1; var clickNum = 0; //點(diǎn)擊同一顆星次數(shù) $('li').hover( function() { if(!isClicked) { $(this).css('color', '#F0AD4E'); var index = $(this).index(); for(var i = 0; i <= index; i++) { $('li:nth-child(' + i + ')').css('color', '#F0AD4E'); } } }, function() { if(!isClicked) { $('li').css('color', '#ADADAD'); } } ); //星星點(diǎn)擊事件 $('li').click(function() { $('li').css('color', '#ADADAD'); isClicked = true; var index = $(this).index(); for(var i = 1; i <= index+1; i++) { $('li:nth-child(' + i + ')').css('color', '#F0AD4E'); } if(index == beforeClickedIndex) { //兩次點(diǎn)擊同一顆星星 該星星顏色變化 clickNum++; if(clickNum % 2 == 1) { $('li:nth-child(' + (index + 1) + ')').css('color', '#ADADAD'); } else { $('li:nth-child(' + (index + 1) + ')').css('color', '#F0AD4E'); } } else { clickNum = 0; beforeClickedIndex = index; } }); }); </script> </body> </html>
總結(jié)
以上所述是小編給大家介紹的JS實(shí)現(xiàn)評(píng)價(jià)的星星功能,希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。