js實現星級評分(第一種實現方式)
阿新 • • 發佈:2019-01-26
1.新建一個Dynamic Web Project專案,裡面新建一個jsp檔案,加入一張評分星星圖片,星星圖片和整體框架如圖所示:
2.index.jsp裡面的程式碼如下所示:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> body, ul, li { padding: 0; margin: 0; } li { list-style-type: none; } .rating { width: 130px; height: 26px; margin: 100px auto; } .rating-item { float: left; width: 26px; height: 26px; background: url("images/star.png") no-repeat; cursor: pointer; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> </head> <body> <ul class="rating" id="rating1"> <li class="rating-item" title="很不好"></li> <li class="rating-item" title="不好"></li> <li class="rating-item" title="一般"></li> <li class="rating-item" title="好"></li> <li class="rating-item" title="很好"></li> </ul> <ul class="rating" id="rating2"> <li class="rating-item" title="很不好"></li> <li class="rating-item" title="不好"></li> <li class="rating-item" title="一般"></li> <li class="rating-item" title="好"></li> <li class="rating-item" title="很好"></li> </ul> <script type="text/javascript"> var rating = (function() { var lightOn = function($item, num) { $item.each(function(index) { if (index < num) { $(this).css('background-position', '0 -26px'); } else { $(this).css('background-position', '0 0'); } }); }; var init = function(el, num) { var $rating = $(el); var $item = $rating.find('.rating-item'); lightOn($item, num); $rating.on('mouseover', '.rating-item', function() { lightOn($item, $(this).index() + 1); }).on('click', '.rating-item', function() { num = $(this).index() + 1; }).on('mouseout', function() { lightOn($item, num); }); }; //變成jquery $.fn.extend({ rating : function(num) { return this.each(function() { init(this, num); }); } }); return { init : init }; })(); rating.init('#rating1', 2); //rating.init('#rating2', 3); //jquery的呼叫形式 $('#rating2').rating(4); </script> </body> </html>
3.在瀏覽器裡面輸入http://localhost:8080/Demo/index.jsp可以實現星級評分的效果,程式碼下載地址:http://download.csdn.net/download/qq_29656961/10007196。