jquery实现用户打分评分特效

前端之家收集整理的这篇文章主要介绍了jquery实现用户打分评分特效前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

js代码

//简洁用户评分代码
$(".pfxtFen li").click(function(){
$(this).addClass("pfxtCur");
$(this).prevAll().addClass("pfxtCur");
$(this).nextAll().removeClass("pfxtCur");
});

$(".pfxtFen li").dblclick(function(){
$(".pfxtFen li").removeClass("pfxtCur");
});

})

CSS

用户评分*/ .pingfenxitong{ padding:15px 0; width:500px; margin:0 auto; } .pingfenList{ float:left; width:500px; padding-right:20px; } .pfxtTitle{ font-weight:bold; font-size:1.2em; padding:4px 0; } .pfxtText{ line-height:25px; } .pfxtFen{ margin:10px 0; } .pfxtFen li{ float:left; width:98px; height:30px; text-align:center; line-height:30px; border:#ddd 1px solid; background:#f1f1f1; cursor:pointer; } .pfxtFen li.pfxtCur{ background:#308A95; color:#fff; border:#308A95 1px solid; }

HTML

<div class="pingfenList">

<div class="pfxtTitle">功能


<div class="pfxtText">你觉得这个创意在功能上优秀吗?

<ul class="pfxtFen" title="双击取消评分">

  • 1
  • 2
  • 3
  • 4
  • 5
  • <div class="pfxtRight">


    <div class="clearfix">

    <div class="pingfenList">
    <div class="pfxtTitle">外观:


    <div class="pfxtText">你觉得这个创意在外观上优秀吗?

    <ul class="pfxtFen" title="双击取消评分">

  • 1
  • 2
  • 3
  • 4
  • 5
  • <div class="pingfenList">
    <div class="pfxtTitle">成本:


    <div class="pfxtText">你觉得这个创意在成本上优秀吗?

    <ul class="pfxtFen" title="双击取消评分">

  • 1
  • 2
  • 3
  • 4
  • 5
  • <div class="pingfenList">
    <div class="pfxtTitle">难度:


    <div class="pfxtText">你觉得这个创意在难度上可行吗?

    <ul class="pfxtFen" title="双击取消评分">

  • 1
  • 2
  • 3
  • 4
  • 5
  • <div class="clearfix">

    以上所述就是本文的全部内容了,希望大家能够喜欢。

    原文链接:https://www.f2er.com/jquery/54157.html
    jquery打分评分

    猜你在找的jQuery相关文章