jQuery滑動表情評分代碼



174 694 232



特效描述:jQuery 滑動表情評分,jQuery滑動表情評分代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/score.js"></script>

3. HTML代碼

<div class='score'>
  <div class='score-expression'> </div>
  <div class='score-praise'> </div>
  <div class='score-heart'> </div>
  <div class='score-star'> </div>
  <div class='score-medal'> </div>
  <div class='score-water'> </div>
  <div class='score-crown'> </div>
  <div class='score-flower'> </div>
</div>
<div class='result'>
  <button>提交</button>
  <div class='result-score'></div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/score.js"></script> 
<script type="text/javascript">
  jQuery(document).ready(function($) {
    $('.score').score();
    $('.result button').on('click',function(){
      var _form_ = true ,
          scoreArr = [] ,
          eachEle = $('.score').children('[class^="score-"]');
      eachEle.each(function(index, el) {
        var l = $(el).children().attr('active-level');
        if(!l) _form_ = false;
        scoreArr.push(l);
      });
      if(_form_){
        var count = scoreArr.reduce(function(p,c){ return p + parseInt(c); },0)
        $('.result-score').html('綜合得分:'+(count/scoreArr.length).toFixed(2));
      }
    })    
  });
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動星星打分 其他 滑動星星打分 鼠標滑過 鼠標懸停 跟隨鼠標移動 星星打分 星星評分 評分
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表