频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
点星星代码实现
2018-03-13 11:54:09         来源:qq_38674970的博客  
收藏   我要投稿

点星星代码实现

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
        <style>  
            body,ul,li{  
                padding:0;  
                margin:0;  
            }  
            li {  
                list-style-type: none;  
            }  
            .rating {  
                width: 130px;  
                height: 26px;  
                margin: 100px auto;  
            }  
            .rating-item {  
                float: left;  
                width: 26px;  
                height: 26px;  
                background: url(star1.png) no-repeat center;  
            }  
        </style>  
</head>  
<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>  
    <ul class="rating" id="rating2">  
        <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>  
  
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>  
    <script>  
    var rating=(function(){  
        // 点亮  
            var init=function(el,num){  
                var $rating =$(el),  
                    $item=$rating.find('.rating-item');  
                var lightOn=function($item,num){  
                    $item.each(function(index){  
                    if(index<num){  
                    $(this).css('background-image','url(star2.png)');  
                    }else{  
                    $(this).css('background-image','url(star1.png)');  
                    }  
                });  
            };  
                            // 初始化  
                lightOn($item,num);  
                // 事件绑定  
                $rating.on('mouseover','.rating-item',function() {  
                    lightOn($item,$(this).index()+1); //加一是因为上面是小于  
                }).on('click','.rating-item',function(){  
                    num=$(this).index()+1; //直接改变num值  
                }).on('mouseout',function(){  //离开时显示  
                    lightOn($item,num);  
                });       
            };  
            // jq封装  
            $.fn.extend({  
                rating:function(num){  
                    return this.each(function(){  
                        init(this,num);  
                    });  
                }  
            })  
            return {  
                init:init  
            };  
  
    })();  
    $('#rating').rating(1);  
    $('#rating2').rating(4);  
    </script>  
</body>  
</html>  
点击复制链接 与好友分享!回本站首页
上一篇:vue插件开发之使用pdf.js实现手机端在线预览pdf文档
下一篇:Ubuntu下用hexo搭建github博客教程
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站