`
465272694
  • 浏览: 52345 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

星星打分效果

阅读更多

这里只提供javascript和html,只供参考,没有例子下载看,我想只要有一些javascript和jquery基础的都能看懂吧。

jquery代码:

$(document).ready(function(){
        $("#stars a").each(function(i){
            $(this).mouseover(function(){
                $("#stars a:lt("+(i+1)+")").attr("class","cur");
                $("#stars a:gt("+i+")").removeClass("cur");
                $("#isRank").attr("value",i+1);//把打的分数放到隐藏域
            });
            $(this).click(function(){
                $("#isRank").attr("value",i+1);
            });
            $(this).mouseout(function(){
                var cur_star = parseInt($("#isRank").val())-1;
                $("#stars a:lt("+(cur_star+1)+")").attr("class","cur");
                $("#stars a:gt("+cur_star+")").removeClass("cur");
                $("#isRank").attr("value",i+1);//把打的分数放到隐藏域
            });

        })
    });

 html页面

<div class="area">
        <div class="fixBox">
            <label>评分:</label>
            <div class="stars" id="stars">
                <a href="javascript:void(0)" class="cur" id="star1"  ></a>
                <a href="javascript:void(0)" id="star2"  ></a>
                <a href="javascript:void(0)" id="star3"  ></a>
                <a href="javascript:void(0)" id="star4"  ></a>
                <a href="javascript:void(0)" id="star5" ></a>
            </div>
            <input type="hidden" value="1" id="isRank" />
            <div class="clear"></div>
        </div>
</div>
 

 

分享到:
评论

相关推荐

    仿淘宝星星评分效果-纯JS

    在本文中,我们将深入探讨如何使用纯JavaScript实现一个仿照淘宝星星评分效果的功能。这个功能在电商网站上非常常见,它允许用户通过选择星星数量来给出商品或服务的评价。以下是一些关键知识点: 1. **HTML结构**...

    js制作星星打分效果

    在网页设计中,星星打分效果是一种常见的用户交互元素,常用于评论、产品评价或问卷调查,让用户通过选择星星的数量来表达对某项事物的满意度。这种效果可以通过JavaScript(简称js)来实现,使得页面更加生动有趣。...

    css星星评分效果

    在网页设计中,星星评分效果是一种常见的用户交互元素,它允许用户通过选择星星数量来表达对某个产品或服务的评价。这种效果不仅直观易用,还能提升网站的用户体验。本教程将详细介绍如何实现CSS星星评分效果,以及...

    js星星评分效果

    在本教程中,我们将探讨如何利用JS实现一个星星评分效果,这个效果常见于评论系统或者产品评分中,用户可以通过点击星星来选择评分。我们将通过源码分析来理解这一过程。 首先,我们需要创建HTML结构来展示星星,...

    jquery点击星星打分效果代码

    《jQuery实现点击星星打分效果详解》 在Web开发中,用户评分系统是常见的互动功能,它可以提升用户体验,增加网站的交互性。本篇文章将详细讲解如何使用jQuery库来实现点击星星实现打分效果的代码实践。jQuery作为...

    jquery 实现星星打分效果

    "jQuery 实现星星打分效果"是一种常见的用户评价或评分机制,常用于电商网站、电影评论等场景,让用户以直观的图形方式表达对某一内容的满意度。jQuery 是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画...

    IOS的星星评分效果

    在iOS应用开发中,星星评分效果是一个常见的用户界面元素,用于让用户对产品或服务进行反馈。这个效果通常出现在评论、评价或者评分系统中,让用户通过点击或者滑动选择他们给出的星级。本教程将深入探讨如何在iOS...

    jquery滑动星星评分效果代码

    标题中的“jquery滑动星星评分效果代码”是指在网页中实现一种交互式的用户评价系统,用户可以通过滑动鼠标选择星级来给出对某个产品或服务的评分。这种效果常见于电影评分、电商商品评价等场景,增加了用户体验的...

    基于jQuery的动态星星评分效果.zip

    【标题】"基于jQuery的动态星星评分效果"指的是在网页中实现一种用户交互式的星星评分系统,用户可以通过点击星星来给某个项目打分,而这些星星会根据用户的鼠标悬停或点击状态实时改变颜色和数量,以显示所选的评分...

    星星评分效果

    星星评分效果是网页设计中常见的用户反馈元素,用于让用户对产品或服务进行直观的评价。在互联网产品中,这种交互方式被广泛应用,如电影评分、商品评价等场景。本篇文章将详细探讨几种星星评分效果的实现插件及其...

    实用的jquery星星评分效果代码.zip

    在本文中,我们将深入探讨如何实现一款基于jQuery的星星评分效果。这个实用的代码库能够为网站添加一种直观且互动的评分系统,用户可以通过滑动鼠标在星星上选择他们给出的评分。以下是对该功能的详细解析: 1. **...

    简单的jquery滑动星星评分效果代码

    在本文中,我们将深入探讨如何实现一个基于jQuery的滑动星星评分效果,这是一种常见的用户界面元素,用于收集用户对产品或服务的评价。这个效果允许用户通过滑动鼠标来选择他们给出的星级评分,通常从一星到五星不等...

    js特效星星打分效果适用于网站评论打分js星级评分效果

    本资源提供的是一个适用于网站评论打分的JS星级评分效果,它可以帮助用户直观地展示和选择评价等级,提升用户体验。下面我们将深入探讨这个JS特效的实现原理和关键知识点。 1. **HTML结构**: 在网页中,通常会...

    jquery星级评分特效制作电影视频网站滑动星星打分效果

    本主题聚焦于使用jQuery实现一个星级评分特效,常见于电影视频网站,用户可以通过滑动鼠标在星星上进行打分。这个功能提高了用户参与度,提供了直观的反馈,对于收集用户评价至关重要。 首先,我们需要理解jQuery的...

    jq星星评分打分

    在IT行业中,jQuery(简称jq)是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画设计和...在提供的压缩包“星星评分效果”中,可能包含了实现这一功能的相关代码示例,可以作为学习和参考的资源。

    JavaScript实现简单的星星评分效果

    标题中的“JavaScript实现简单的星星评分效果”是指使用JavaScript编程语言来创建一个用户界面元素,让用户能够通过选择星星的数量来给出评分。这个效果通常用于在线评价系统,如电影、产品或服务的评分。在这个实例...

    js实现星星打分效果的方法

    本文实例讲述了js实现星星打分效果的方法。分享给大家供大家参考。具体分析如下: 很多网站都有如下图这样的星星打分效果,今天就看下用js怎么实现打分效果。 效果详解 1. 鼠标移上的时候星星点亮,下面的文字显示...

    jquery Raty 星星打分(星星图片以及js文件)

    《jQuery Raty:实现星星打分的完整指南》 在Web开发中,用户评价系统是增强用户体验、收集反馈的重要组成部分。jQuery Raty是一款强大的JavaScript插件,它允许用户通过点击星星来轻松地进行评分,提供了丰富的...

Global site tag (gtag.js) - Google Analytics