標籤：技術分享 分享 pad png function set repeat click item
利用一個星級評等的小案例，來逐步封裝js星級評等外掛程式。
從最基礎的js知識，通過一個小的demo，逐步學習js的物件導向知識。
從淺到深，逐步遞進。
圖片素材
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>星級評等--第一種實現方式</title></head><style type="text/css"> body,ul,li{ margin: 0; padding: 0; } li{ list-style-type: none; } .rating{ width: 162px; height: 32px; margin: 100px auto; } .rating-item{ float: left; width: 32px; height: 32px; background: url(‘./img/rating.png‘) no-repeat; cursor: pointer; }</style><body><ul class="rating" id="rating"> <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></body><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><script type="text/javascript"> var num = 2, $rating = $(‘#rating‘), $item = $rating.find(‘.rating-item‘); //點亮星星 var lightOn = function(num){ $item.each(function(){ if($(this).index() < num){ $(this).css(‘background-position‘,‘0 -32px‘); }else{ $(this).css(‘background-position‘,‘0 0‘); } }); } //初始化,點亮num個星星 lightOn(num); $item.on(‘mouseover‘,function(){//滑鼠移入時,觸發相應操作 lightOn($(this).index() + 1); }).on(‘click‘,function(){//滑鼠點擊時,觸發相應操作 num = $(this).index() + 1; }); //滑鼠移出是,觸發相應的操作 $rating.on(‘mouseout‘,function(){ lightOn(num); });</script></html>
js實現星級評等之方法一
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
