精华内容
下载资源
问答
  • 五角星评分

    2017-02-28 14:04:09
    一套关于''五角星'评分的三方资源库.简单实用,让开发更加容易上手.
  • 五角星评分、爱心评分、评分
  • 1. 鼠标经过li的时候,当前的位置是实心五角星,前面的是实心。当前位置后面的是空心。...3. 点击li的时候,当前的位置增加个current的class, 其余位置移除current代码如下五角星评分案例* {padding: 0;margin: 0...

    1. 鼠标经过li的时候,当前的位置是实心五角星,前面的是实心。当前位置后面的是空心。注意此处不能完全用链式编程写到底

    2. 鼠标离开,comment的所有孩子变为空心五角星。额外,找到current, 让current和它的前面都是实心。

    3. 点击li的时候,当前的位置增加个current的class, 其余位置移除current

    621231545721519f435b0e1a1e085863.png

    代码如下

    五角星评分案例

    * {

    padding: 0;

    margin: 0;

    }

    .comment {

    font-size: 40px;

    color: #ff16cf;

    }

    .comment li {

    float: left;

    }

    ul {

    list-style: none;

    }

    $(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");

    });

    });

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 主要介绍了jquery五角星评分插件示例分享,需要的朋友可以参考下
  • 五角星评分控件

    2013-12-02 10:14:41
    五角星评分控件
  • 主要介绍了如何基于jQuery实现五角星评分,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • jQuery五角星评分插件#rating_cont { background: #1E1D1C url(images/rating_background.jpg) top left no-repeat; border: 1px solid #F9BA0D; width: 140px; height: 23px; text-align: left; margin-left: 6px;}...
    jQuery五角星评分插件

    #rating_cont { background: #1E1D1C url(images/rating_background.jpg) top left no-repeat; border: 1px solid #F9BA0D; width: 140px; height: 23px; text-align: left; margin-left: 6px;}

    #rating_on { background: url(images/rating_onbackground.jpg) top left no-repeat; width: 0px; height: 21px; position: relative; z-index: 50; top: -21px; }

    #rated { display: none; width: 138px; padding: 3px 0px 3px 2px; height: 23px; background-color: #1E1D1C; height: 17px;font-size: 11px;color: #FFC910;}

    #rated div { display: block; float: left; }

    #rating { font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFC910; padding-left: 3px; width: 22px; }

    #small_stars { height: 11px; width: 69px; background-image: url(images/stars_small_sprite.jpg); background-position: 0px -11px; font-size:1px; line-height: 11px; margin-top:3px; }

    #rate_edit { line-height: 17px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFF; padding-left: 9px; cursor: pointer; }

    #rate_edit:hover { text-decoration: underline; }

    #rating_btns { position: relative; z-index: 100; width: 140px; height: 21px;}

    #rating_btns ul, #rating_btns li  { padding: 0; margin: 0; }

    #rating_btns li { float: left; width: 14px; height: 21px; display: block; font-size: 1px; cursor: pointer; color: #1E1D1C;

    }

    • 0.5
    • 1.0
    • 1.5
    • 2.0
    • 2.5
    • 3.0
    • 3.5
    • 4.0
    • 4.5
    • 5.0
    not rated
    -  
    edit
    展开全文
  • jQuery简单实用的五角星评分特效有几个特点,第一给所有的li注册mouseenter事件,第二让当前li和前面所有的li变成实心,让后面所有的兄弟变成空心,第三离开ul的时候,把所有的li变成空心。
  • 简单实用的五角星评分jQuery代码有几个特点,第一给所有的li注册mouseenter事件,第二让当前li和前面所有的li变成实心,让后面所有的兄弟变成空心,第三离开ul的时候,把所有的li变成空心。
  • 五角星评分案例* {padding: 0;margin: 0;}.comment {font-size: 80px;color: orangered;margin-left:600px;margin-top:200px;}.comment li {float: left;cursor: pointer;}ul {list-style: none;}//鼠标放上去当前的...
    五角星评分案例

    * {

    padding: 0;

    margin: 0;

    }

    .comment {

    font-size: 80px;

    color: orangered;

    margin-left:600px;

    margin-top:200px;

    }

    .comment li {

    float: left;

    cursor: pointer;

    }

    ul {

    list-style: none;

    }

    //鼠标放上去当前的li和之前的所有li内容全变成实心五角星,离开变为空心

    //鼠标点击哪个li,当前li和之前所有的li变成实心五角星,其他变为空心

    $(function () {

    var wjx_none = '☆'; // 空心五角星

    var wjx_sel = '★'; // 实心五角星

    $(".comment li").on("mouseenter",function(){

    $(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);

    // $(this).text(wjx_sel).prevAll("li").text(wjx_sel)

    // $(this).nextAll("li").text();

    });

    $(".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","current")

    });

    })

    一键复制

    编辑

    Web IDE

    原始数据

    按行查看

    历史

    展开全文
  • jquery五角星评分满分100分,用户web开发
  • jQuery的五角星评分插件
  • jQuery实现仿五角星评分案例 ​ 这两周一直在做网页相关的,最近由于项目需求,又要重新捡起遗失已久的前端了(什么前端不前端,身为一颗螺丝钉,哪里需要往哪打)。 ​ 重拾jQuery的第一感受,这玩意用起来真的太...

    jQuery实现仿五角星评分案例

    ​ 这两周一直在做网页相关的,最近由于项目需求,又要重新捡起遗失已久的前端了(什么前端不前端,身为一颗螺丝钉,哪里需要往哪打)。

    ​ 重拾jQuery的第一感受,这玩意用起来真的太舒服。由于要实现仿五角星评分的效果,故采用jQuery的方式实现。图例如下,

    点击进入演示地址
    案例演示

    案例描述:现在有五颗五角星,当我们鼠标在五角星上滑动时,对应的五角星以及它前面的五角星会被点亮;当我们鼠标离开五角星时,所有五角星都会熄灭;当我们点击五角星时,当前五角星以及它前面五角星会点亮,点击后移开鼠标点亮的五角星不变,如果继续在五角星上移动则会重现第一步。

    首先分析这个问题

    在这个案例中,有鼠标进入事件,有鼠标离开事件,还有鼠标点击事件。

    鼠标进入可以用mouseover,鼠标离开可用mouseout。未发生点击事件时,当鼠标进入时只需要将对应的星星以及它前面的星星元素点亮即可;当鼠标离开时只需将所有的星星元素熄灭即可。

    点击事件发生时:这时我们需要将当前星星以及它前面的星星元素的属性保存并不能改变,这里我们可以采用给被点亮的星星元素再设置一个属性值的方法。

    大家看文字解释可能有点迷糊,有种似懂非懂的感觉。话不多说,看了代码之后可能会解决你心中的迷惑。

    show your code!

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>五角星评分案例</title>
    		<style>
    			* {
    				padding: 0;
    				margin: 0;
    			}
    			.comment {
    				font-size: 40px;
    				color: yellow;
    			}
    			.comment li {
    				float: left;
    			}
    			ul {
    				list-style: none;
    			}
    		</style>
    		<script src="js/jquery-3.4.1.min.js"></script>
    		<script>
    			$(function() {
    				//获取所有的li绑定鼠标进入和鼠标离开和点击事件
    				$(".comment>li").mouseover(function() {
    					$(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
    				}).mouseout(function() {
    					$(this).text("☆").prevAll("li").text("☆");
    					//获取属性index为10的这个li和这个li前面所有的li
    					$(".comment>li[index=10]").text("★").prevAll("li").text("★");
    				}).click(function() {
    					$(this).attr("index", "10").siblings("li").removeAttr("index");
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<ul class="comment">
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    		</ul>
    	</body>
    </html>
    

    相信大家看了代码之后心中的疑惑会被解开。有什么不懂的地方欢迎在评论区留言 >_<

    展开全文
  • jQuery五角星评分

    千次阅读 2017-02-09 14:39:50
    jQuery五角星评分
  • jQuery之五角星评分案例

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

    2017-11-29 15:06:17
    五角星评分 1. KiStarRateView ######设置选中和未选中的图片, 和显示的个数 func setBottomImageName(_ bottomImgName:String,topImgName:String,WJXCount:NSInteger) public var hasAnimation:Bool = false //...
  • jQuery简单实用的五角星评分特效有几个特点,第一给所有的li注册mouseenter事件,第二让当前li和前面所有的li变成实心,让后面所有的兄弟变成空心,第三离开ul的时候,把所有的li变成空心。
  • 1.前言 如何在页面中实现五角星评分呢?鼠标放上去有动态效果并可以点击。来来来,demo走起来! 2.详情 1.css样式 .cleanfloat::after{display: block; ...
  • 五角星评分案例

    2018-08-23 18:35:41
    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="...五角星评分案例&lt;/title&gt; &lt;style&gt; * { padding:
  • PHP+Mysql+JQuery+CSS五个栏目五角星评分功能 自己公司需要做这个项目,网上找的例子只能做参考,还是需要按照自己的需求调整,经过3天的努力,终于完成,希望对大家有帮助。
  • jQuery简单实用的五角星评分特效有几个特点,第一给所有的li注册mouseenter事件,第二让当前li和前面所有的li变成实心,让后面所有的兄弟变成空心,第三离开ul的时候,把所有的li变成空心。
  • 五角星评分小例子

    2019-10-04 10:27:02
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五角星评分案例</title> <style> * { padding: 0; ...
  • Jq五角星评分效果

    2014-09-17 09:44:03
    利用Jq和CSS实现的简单的五角星评分效果。五角星采用图片。   在线演示及代码

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,715
精华内容 686
关键字:

五角星评分