zoukankan      html  css  js  c++  java
  • js css 点亮 星级评分

    利用css 和 js 实现星级评分

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>rating</title>
    </head>
    <style >
    	*{margin:0;padding: 0}
    	ul{500px; padding:100px;padding:0 auto;}
    	li{
    		16px;
    		height: 16px;
    		list-style: none;
    		display: inline-block;
    		background: url('http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_star.jpg') no-repeat;
    	}
    </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>
    </html>
    <script type="text/javascript" src="https://files.cnblogs.com/files/tonnytong/___jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
    	$(function(){
    		var ratingWrap = $("#rating")
    			, ratingItem = $(".rating-item",ratingWrap)
    			, num = 2;
    
    		var lightOn = function(num){
    			ratingItem.each(function(index){
    				var $this = $(this);
    				$this.css("background","url('http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_star.jpg')");
    				if((index +1) <= num)
    				{
    					$this.css("background","url('http://images.cnblogs.com/cnblogs_com/tonnytong/769928/o_on.jpg')");
    				}
    
    			})
    		}
    
    		lightOn(num);
    
    
    		$(".rating-item").on("mouseover",function(){
    			var $this = $(this);
    			lightOn($this.index()+1);
    
    		}).on("click",function(){
    			var $this = $(this);
    			num = $this.index()+1;
    		}).on("mouseout",function(){
    			lightOn(num);
    		})
    
    
    	})
    </script>
    

      

    效果如下:

  • 相关阅读:
    TP
    vim manual 个人笔记
    关于动画属性
    过渡
    关于 css3 的filter属性
    html 中行内元素和块级元素区别
    JS以不同的格式保存文件内容
    64位Kali无法顺利执行pwn1问题的解决方案
    鱼龙混杂 · 数据结构学习笔记(01)
    Terminal(终端) 在 OS X下如何快速调用
  • 原文地址:https://www.cnblogs.com/tonnytong/p/7851575.html
Copyright © 2011-2022 走看看