模擬實現的星星評分效果詳解
本章節分享一段程式碼例項,它實現了類似於星級評分的效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0px; padding:0px; list-style:none; } .star li{ float:left; height:20px; width:20px; background-color:blue; margin-right:4px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function(){ $(".star li").mouseenter(function(){ $(".star li").css("background","#f60"); $(this).css("background","#f60"); $(this).nextAll().css("background","#ccc"); }) }); </script> </head> <body> <div>選中星星:</div> <ul class="star"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).$(function(){ }),當文件內容完全載入完畢再去執行函式中的程式碼。
(2).$(".star li").mouseenter(function(){}),為li元素註冊mouseenter事件處理函式。
(3).$(".star li").css("background","#f60"),設定所有li元素的背景顏色。
(4).$(this).css("background","#f60"),將當前li元素的背景顏色設定為#f60。
(5).$(this).nextAll().css("background","#ccc"),將當前元素後面的所有的li元素背景色設定為#ccc。
二.相關閱讀:
(1).mouseenter事件可以參閱jQuery mouseenter事件一章節。
(2).css()方法可以參閱jQuery css()一章節。
(3).nextAll()方法可以參閱jQuery nextAll()一章節。
相關文章
- 微信小程式實現星星評分效果微信小程式
- 原生Javascript實現星星評分元件JavaScript元件
- jQuery星級評分效果詳解jQuery
- js模擬實現列舉效果JS
- js實現的模擬滾動條效果JS
- 詳解 new/bind/apply/call 的模擬實現APP
- css實現的滑鼠滑過星星高亮效果CSS
- 滑鼠劃過星級評分效果詳解
- 用純css實現打星星效果(三)CSS
- jquery模擬實現的連結title提示效果jQuery
- jQuery星級評分實現過程詳解jQuery
- css活用,評分點選星星CSS
- VUE實現評分效果和不同型別分數展示效果元件Vue型別元件
- javascript模擬美化select下拉選單效果詳解JavaScript
- JavaScript模擬無重新整理評論效果JavaScript
- javascript模擬實現ArrayList效果程式碼例項JavaScript
- PHP單例模式模擬Java Bean實現方法示例詳解PHP單例模式JavaBean
- js模擬實現多型效果程式碼例項JS多型
- css模擬實現雙擊效果程式碼例項CSS
- CSS3模擬實現iphone返回按鈕效果CSSS3iPhone
- 模擬實現連結title效果程式碼例項
- javascript模擬實現連結的title效果例項程式碼JavaScript
- promise的模擬實現Promise
- 浪起來!使用 drawBitmapMesh 實現模擬水波紋效果
- css模擬實現手機通訊錄佈局效果CSS
- 模擬實現文字框游標效果程式碼例項
- javascript模擬實現滾動條效果程式碼例項JavaScript
- css活用,半星星的效果CSS
- jquery實現滑動門效果詳解jQuery
- javascript模擬new的實現JavaScript
- JavaScript 模擬new的實現JavaScript
- jQuery模擬打字機詳解jQuery
- jQuery+PHP實現購物商城常用的星級評分效果jQueryPHP
- 商城側欄導航效果實現詳解
- javascript實現的焦點圖輪播效果詳解JavaScript
- javascript模擬實現replaceAll()JavaScript
- svpwm的matlab模擬實現Matlab
- 一道面試題帶來的前端優化——實現星星點評面試題前端優化