javascript+css好多網站用的選星星實現打分功能的函數

2019-11-21 01:45:31

字體：大中小

來源：轉載

供稿：網友

函數有兩個參數，功能如下：
obj： img標簽組的父容器，類型為DOM對象；
oEvent： event對象。
這個函數的優點是html代碼可以很簡潔，使用圖片也可以很少，只需要兩張圖片。事件句柄只需要寫在img的父容器上即可。演示用的圖片我用的是絕對地址，各位在使用的時候改成網站的相對地址就可以了。當我們點擊的時候，我用的是個alert事件。事實上，我們會在這個地方用個ajax方法，把相關的參數傳到服務器端。只要把alert(this._num+1)寫成sendAjax(this._num+1)就可以了。
需要的兩張圖片：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>武林網_m.survivalescaperooms.com_阿當制作選星星打分</title> <style type="text/css"> .starWrapper{border:1px solid #FFCC00;padding:5px;width:70px;} .starWrapper img{cursor:pointer;} </style> <script type="text/javascript"> function rate(obj,oEvent){ //================== // 圖片地址設置 //================== var imgSrc = '//m.survivalescaperooms.com/upload/20080508122008586.gif'; var imgSrc_2 = '//m.survivalescaperooms.com/upload/20080508122010810.gif'; //--------------------------------------------------------------------------- if(obj.rateFlag) return; var e = oEvent || window.event; var target = e.target || e.srcElement;  var imgArray = obj.getElementsByTagName("img"); for(var i=0;i<imgArray.length;i++){    imgArray[i]._num = i;    imgArray[i].onclick=function(){     if(obj.rateFlag) return;     obj.rateFlag=true;     alert(this._num+1);    }; } if(target.tagName=="IMG"){    for(var j=0;j<imgArray.length;j++){     if(j<=target._num){      imgArray[j].src=imgSrc_2;     } else {      imgArray[j].src=imgSrc;     }    } } else {    for(var k=0;k<imgArray.length;k++){     imgArray[k].src=imgSrc;    } } } </script> <body> <p class="starWrapper" onmouseover="rate(this,event)">           <img src="https://www.jb51.net//m.survivalescaperooms.com/upload/20080508122008586.gif" title="很爛" /><img src="https://www.jb51.net//m.survivalescaperooms.com/upload/20080508122008586.gif" title="一般" /><img src="https://www.jb51.net//m.survivalescaperooms.com/upload/20080508122008586.gif" title="還好" /><img src="https://www.jb51.net//m.survivalescaperooms.com/upload/20080508122008586.gif" title="較好" /><img src="https://www.jb51.net//m.survivalescaperooms.com/upload/20080508122008586.gif" title="很好" /> </p> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：js取得當前網址

下一篇：js方塊躲避游戲代碼