网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料:

 

标题 jQuery 实现评论等级好评差评特效
内容
    本文主要介绍如何实现类似淘宝好评差评的效果,需要的小伙伴直接拿去用吧。
    代码如下:
    <style>
            .maxdiv div{
                height:10px;
                width:20px;
                border:1px solid #000;
                float:left;
                margin:20px 2px 0px 5px;
            }
    </style>
    代码如下:
    <div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    <span></span>
    最后大家看下JS 上边小编已经把注释都注上了,其实也不难,主要是加深理解..
    代码如下:
    $(function(){
        $(".maxdiv div").bind("hover",function(){
            $(this).attr("style","background:red");//当前div加上style="background:red";
            $("div:last").prevAll().attr("style","background:red");//给所有的都加上样式;
            $(this).nextAll().attr("style","");//当前div后的所有所有样式都为"";
            var dsize=$("div [style ='background:red']").size();//获得所有背景含有style="background:red"的个数;
            if(dsize==1)
            {
            $('span').text("很差");
            }
            else if(dsize==2)
            {
            $('span').text("差");
            }
            else if(dsize==3)
            {
            $('span').text("一般");
            }
            else if(dsize==4)
            {
            $('span').text("好");
            }
            else if(dsize==5)
            {
            $('span').text("很好");
            }
        });
    });
    个人能力有限,做的不是太美观,有需要的朋友可以拿去再美化一下,呵呵。
随便看

 

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/15 4:51:49