精华内容
下载资源
问答
  • 主要介绍了jquery五角星评分插件示例分享,需要的朋友可以参考下
  • jquery五角星评分满分100分,用户web开发
  • jQuery五角星评分

    2021-06-01 20:04:39
    鼠标移上去能显示评分,代码简单
  • ;(function($) { var methods = { init: function(settings) { return this.each(function() { var self = this, $this = $(self).empty(); self.opt = $.extend(true, {}, $.fn.raty.defaults, settings);...
  • jquery实现五角星评分效果1.实现效果2.思路分析3.具体实现步骤4.具体代码 1.实现效果 鼠标移入,当前的星星和之前的星星变成红色,当鼠标移出时,星星都变成空心的。鼠标移出评论区后,再次移入到星星上,当前的星星...

    1.实现效果

    鼠标移入,当前的星星和之前的星星变成红色,当鼠标移出时,星星都变成空心的。鼠标移出评论区后,再次移入到星星上,当前的星星和之前的星星变成红色。

    2.思路分析

    1. 鼠标移入到li上 ----------当前的li以及前面所有的li变成实心,当前li后面所有的li变成空心。
    2. 鼠标移出ul----------------把所有的li变成空心
    3. 鼠标移出ul后,再次移入到li上------当前的li以及前面所有的li变成实心,当前li后面所有的li变成空心。

    3.具体实现步骤

    1. 鼠标移入到li上
      $('li').on('mouseenter',function(){
                  $(this).text(re).end().prevAll('li').text(re).end().nextAll('li').text(r)
       })
    
    1. 鼠标移出ul
     $('ul').on('mouseleave',function(){
                $(this).children().text(r)
                  
            })
            
    
    1. 鼠标移出ul后,再次移入到li上
       $('li').on('mousemove',function(){
                console.log(1);
                $(this).prevAll('li').text(re).end().nextAll('li').text(r)
            })
    

    4.具体代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            ul{
                width: 200px;
                height: 30px;
            }
            li{
                font-size: 30px;
                width: 30px;
                height: 30px;
                list-style: none;
                float: left;
                color:red;
                /* background-color: ; */
            }
        </style>
        <script src="jquery-3.4.0.js"></script>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        
        <script>
            var r = '☆'
            var re =  '★'
            $('li').on('mouseenter',function(){
            //1. 让当前li和前面所有的li变成实心,让后面所有的兄弟变成空心
                  $(this).text(re).end().prevAll('li').text(re).end().nextAll('li').text(r)
            })
            // 2 离开ul的时候,把所有的li变成空心
            $('ul').on('mouseleave',function(){
                $(this).children().text(r)
                  //3. 让当前li和前面所有的li变成实心,让后面所有的兄弟变成空心
                $('li').on('mousemove',function(){
                    console.log(1);
                    $(this).prevAll('li').text(re).end().nextAll('li').text(r)
                })
            })
        </script>
    </body>
    </html>
    
    展开全文
  • Jquery五角星评分效果

    2016-04-20 14:23:00
    采用Jq Css制作的五角星评分效果,主要是利用CSS的background-image以及background-position来调整我们的背景图片,以及Jq来选择要变化的元素。代码非常简单,只有几行。 Jq: $("....

    采用Jq Css制作的五角星评分效果,主要是利用CSS的background-image以及background-position来调整我们的背景图片,以及Jq来选择要变化的元素。代码非常简单,只有几行。

    Jquery五角星评分-彭亚欧个人博客代码中心

    Jq:

    $(".formItemDiff").hover(function() {
                    $(this).css("background-position", "0px -555px");
                    $(this).prevAll().css("background-position", "0px -555px");
                    $(this).nextAll().css("background-position", "0px -575px");
                 
                    $("#pointP").html($(this).prevAll().length 1 "分");
                });
        });

    CSS:

    .formItemDiff {
        width: 20px;
        height: 20px;
        background-image: url(http://www.pengyaou.com/food/Images/diff.png);
        background-position: 0px -575px;
        float: left;
        margin-top: 15px;
    }

    转载于:https://my.oschina.net/u/588516/blog/662950

    展开全文
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>... ma
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        * {
          padding: 0;
          margin: 0;
        }
        .comment {
          font-size: 40px;
          color: rgb(247, 10, 6);
        }
        .comment li {
          float: left;
          cursor: pointer;
        }
        ul {
          list-style: none;
        }
      </style>
      <script src="jquery-3.4.1.js"></script>
      <script>
        $(function () {
          var wjx_none = '☆'; // 空心五角星
          var wjx_sel = '★'; // 实心五角星
    
          // 鼠标放上去当前的li和之前所有的li内容全部变为实心五角星,移开变为空心
          $('.comment li').on('mouseenter', function () {
            // 先让当前的变为实心
            // $(this).text(wjx_sel).prevAll('li').text(wjx_sel);
            // $(this).nextAll('li').text(wjx_none);
    
            // 两行代码傻傻分不清的时候需要用 end() 结束之后在使用,也就相当于重新一行再次使用 this
            $(this).text(wjx_sel).prevAll('li').text(wjx_sel).end().nextAll('li').text(wjx_none);
          })
          $('.comment li').on('mouseleave', function () {
            if ($('li.current').length === 0) {
              $('.comment li').text(wjx_none);
            }else{
              $('li.current').text(wjx_sel).prevAll('li').text(wjx_sel).end().nextAll('li').text(wjx_none);
            }
          })
          $('.comment li').on('click', function () {
            $(this).attr('class', 'current').siblings('li').removeAttr('class');
          })
        })
      </script>
    </head>
    <body>
      <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
      </ul>
    </body>
    </html>
    
    • demo 效果:

    展开全文
  • 1. 鼠标经过li的时候,当前的位置是实心五角星,前面的是实心。当前位置后面的是空心。注意此处不能完全用链式编程写到底 2. 鼠标离开,comment的所有孩子变为空心五角星。额外,找到current, 让current和它的前面都...
  • jQuery五角星案例

    2021-08-17 23:05:33
    jQuery五角星案例 文章目录jQuery五角星案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <...

    jQuery五角星案例

    文章目录


    在这里插入图片描述

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
           <title>五角星评分案例</title>
           <style>
             * {
               padding: 0;
               margin: 0;
             }
         
             .comment {
               font-size: 40px;
               color: pink;
             }
         
             .comment li {
               float: left;
             }
         
             ul {
               list-style: none; 
             }
           </style>
        <script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
           <script>
             $(function () {
         
               //1. 给li注册鼠标经过事件,让自己和前面所有的兄弟都变成实心
               var wjx_k = "☆";
               var wjx_s = "★";
               $(".comment > li").on("mouseenter", function () {
                 $(this).text(wjx_s).prevAll().text(wjx_s);
                 $(this).nextAll().text(wjx_k);
               });
         
               //2. 给ul注册鼠标离开时间,让所有的li都变成空心
         
               $(".comment").on("mouseleave", function () {
                 //2. 给ul注册鼠标离开时间,让所有的li都变成空心
                 $(this).children().text(wjx_k);
                 //再做一件事件,找到current,让current和current前面的变成实心就行。
                 $("li.current").text(wjx_s).prevAll().text(wjx_s);
               });
         
         
               //3. 给li注册点击事件
               $(".comment>li").on("click", function () {
                 $(this).addClass("current").siblings().removeClass("current");
               });
         
             });
           </script>
         
         
         </head>
         
         <body> 
           <ul class="comment">
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
           </ul> 
         </body> 
     </html>
    
    展开全文
  • jQuery五角星评分案例

    千次阅读 2018-05-29 20:28:06
    五角星评分是我们常见的打分方式,今天就用jquery来写一个五角星评分 在此,css内容不再写 需求 将鼠标放在五角星上,此五角星和它之前的五角星都会变成实心五角星,后面的变成空心 当鼠标离开时,所有五角星...
  • jQuery 五角星评分

    2019-06-15 14:34:00
    五角星打分 我用的是搜狗输入法上带的特殊符号打出来的 空五角星:☆ 实五角星:★ 1.html 1 <ul class="comment"> 2 <li>☆</li> 3 <li>☆</li> 4 <li>☆</li> ...
  • 1.引入jQuery <script src="./js/jquery.min.js"></script> 2.代码 总结其实就是换背景图。。 html <div class="statsBox clearfix"> <div class="formItemDiff formItemDiffFirst"><...
  • 自学前端的小伙伴看过来 jQuery五角星评分小效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>五角星评分案例</title>...
  • jQuery简单实用的五角星评分特效有几个特点,第一给所有的li注册mouseenter事件,第二让当前li和前面所有的li变成实心,让后面所有的兄弟变成空心,第三离开ul的时候,把所有的li变成空心。
  • 简单实用的五角星评分jQuery代码有几个特点,第一给所有的li注册mouseenter事件,第二让当前li和前面所有的li变成实心,让后面所有的兄弟变成空心,第三离开ul的时候,把所有的li变成空心。
  • jQuery五角星评分插件
  • jQuery简单实用的五角星评分特效有几个特点,第一给所有的li注册mouseenter事件,第二让当前li和前面所有的li变成实心,让后面所有的兄弟变成空心,第三离开ul的时候,把所有的li变成空心。
  • jQuery鼠标滑过五角星打分星级评分代码是一款5颗星10分制的jQuery滑动星星评分插件,可取消评分结果,重新打分。
  • 代码片段:  $(function () {  //评分  var starRating = 0;  $('.photo span').on('mouseenter',function () {  var index = $(this).index()... $(this).prevAll().find('.high').css('z-index',1) ...
  • //给标记的五角星以及之前的五角星变为实心 $('.all>li[biaoji]').text(sx_wjx).prevAll().text(sx_wjx); }).on('click',function(){ //给要点击的li做一个标记,attr添加属性 $(this).attr('biaoji','aaa')....
  • jQuery简单实用的五角星评分特效有几个特点,第一给所有的li注册mouseenter事件,第二让当前li和前面所有的li变成实心,让后面所有的兄弟变成空心,第三离开ul的时候,把所有的li变成空心。
  • jQuery实现仿五角星评分案例 ​ 这两周一直在做网页相关的,最近由于项目需求,又要重新捡起遗失已久的前端了(什么前端不前端,身为一颗螺丝钉,哪里需要往哪打)。 ​ 重拾jQuery的第一感受,这玩意用起来真的太...
  • 实现思路:先获取点击的五角星,设当前点击的五角星为实心的,然后调用siblings()方法,设所有的同辈五角星都为实心的,最后再把他之后的所有兄弟(同辈)元素设为空心的,就这样,一个动态评分效果就出来了 欢迎...
  • jQuery鼠标经过星星显示特效是一款可以自定义跟随鼠标移动的星星的数量,颜色,范围等,也可以使用自定义的图片来代替星星。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 943
精华内容 377
关键字:

jquery五角星