`
free_zhou
  • 浏览: 52103 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

评论级别 星星

    博客分类:
  • ajax
阅读更多
前段时间asp.net做了一个评论的星星,感觉很是不爽,偷懒之余在网上看前辈js实现的不错,收集一下。这个放到ajax模块不合适了。。。
CSS 代码:
  .starWrapper img
        {
            cursor: pointer;
        }


javascript 代码:
function rate(obj, oEvent) {
            var imgSrc = "http://dl.iteye.com/upload/attachment/285119/8339121d-8e6a-3737-8f4d-f516f6d2054e.gif";
            var imgSrc_2 = "http://dl.iteye.com/upload/attachment/285121/7dcca150-d834-372a-9469-3cdd3237f45e.gif";
            var e = oEvent || window.event;
            var target = e.target || e.srcElement; //当前事件的源,firefox的e.target == IE的e.srcElement
            var imgArray = obj.getElementsByTagName("img");
            for (var i = 0; i < imgArray.length; i++) {
                imgArray[i]._num = i;
                imgArray[i].onclick = function () {
                    // alert(this._num + 1);
                    var inputid = this.parentNode.previousSibling.previousSibling;
                    inputid.value = this._num + 1;
                }
            }
            if (target.tagName == "IMG") {
                for (var j = 0; j < imgArray.length; j++) {

                    if (j <= target._num) {
                        imgArray[j].src = imgSrc_2;
                    } else {
                        imgArray[j].src = imgSrc;
                    }
                    target.parentNode.onmouseout = function () {
                        var imgnum = parseInt(target.parentNode.previousSibling.previousSibling.value);
                        for (n = 0; n < imgArray.length; n++) {
                            imgArray[n].src = imgSrc;
                        }
                        for (n = 0; n < imgnum; n++) {
                            imgArray[n].src = imgSrc_2;
                        }
                    }
                }
            } else {
                return false;
            }
        }


html 代码
<div id="div1">
        前台js实现评分:
        <input type="text" value="0" id="starHidden" />
        <p class="starWrapper" onmousemove="rate(this,event)">
            <img alt="" src="http://dl.iteye.com/upload/attachment/285119/8339121d-8e6a-3737-8f4d-f516f6d2054e.gif" title="呕吐" />
            <img alt="" src="http://dl.iteye.com/upload/attachment/285119/8339121d-8e6a-3737-8f4d-f516f6d2054e.gif" title="安静" />
            <img alt="" src="http://dl.iteye.com/upload/attachment/285119/8339121d-8e6a-3737-8f4d-f516f6d2054e.gif" title="高兴" />
            <img alt="" src="http://dl.iteye.com/upload/attachment/285119/8339121d-8e6a-3737-8f4d-f516f6d2054e.gif" title="赞许" />
            <img alt="" src="http://dl.iteye.com/upload/attachment/285119/8339121d-8e6a-3737-8f4d-f516f6d2054e.gif" title="顶起" />
        </p>
    </div>


  • 大小: 314 Bytes
  • 大小: 321 Bytes
分享到:
评论

相关推荐

    ios-星星形状的评分进度条.zip

    在iOS开发中,创建一个星星形状的评分进度条是一种常见的需求,特别是在评论、评价或者打分功能中。这种设计能够直观地展示用户或他人对某项作品的评价等级。本项目"ios-星星形状的评分进度条.zip"提供了一个名为...

    ios-五星好评使用简单不用改代码 直接改星星图片,两行代码完成评论控件的创建.zip

    这个名为“ios-五星好评使用简单不用改代码 直接改星星图片,两行代码完成评论控件的创建.zip”的压缩包文件提供了一个简单易用的解决方案,用于创建一个可以评分的评论控件,用户可以通过点击或滑动来给应用打分。...

    jQuery基于ajax实现星星评论代码

    例如,通过调整星星图标的背景位置来显示不同级别的评分,以及使用类名(如.active-star)来表示当前选中的星星状态,使得用户界面更加友好和直观。在实际应用中,还需要考虑缓存机制、错误处理机制等,以提供更加...

    JavaScript实现星星等级评价功能

    8. 当用户点击某个星星时,会通过click事件更新变量k的值,从而记录下用户选择的星星级别,并在鼠标离开时根据k值显示对应的评价文本。 9. 通过上述的鼠标事件和属性更改,实现了一个基本的星星等级评价功能,使得...

    小程序实现:TabBar,卡片布局,箭头样式,头像,星星评分

    比如,TabBar 可能会包含星星评分,卡片布局内可以展示头像和箭头,而星星评分则可能出现在评论或商品详情页面中。通过熟练掌握这些基础组件和布局技巧,开发者能够构建出更加丰富和交互性强的微信小程序应用。

    android 自定义星级评论可配置大小;数量,显示半星;小数星

    首先,我们要理解的是“可显示小数级别的星星”。在标准的Android系统中,RatingBar组件通常只支持整数评分,但在这个自定义组件中,开发者扩展了这一功能,使得用户可以选择0.1、0.2到5.0等小数点后的评分。这在...

    星星雨新版网站全站程序 v3.0.rar

    它通常包括网站的框架、数据库接口、内容管理系统(CMS)、模板系统、用户权限管理、搜索功能、评论系统等多个部分。这些组成部分相互协作,使开发者能够快速地构建和管理网站,而无需从零开始编写每一行代码。 在...

    自定义RatingBar,五星评论

    - 将这些图片设置到LevelListDrawable的各个级别中。 - 通过设置RatingBar的stepSize属性为0.5,使得它可以显示半星。 5. 动态改变RatingBar的属性 - 在代码中,可以通过setProgressDrawable()和...

    小程序半星评论

    "小程序半星评论"这一功能设计,允许用户给予更细致的评分,不仅仅是传统的五星级别,而是可以精确到半星。这样的设计有助于获取更精确的用户满意度数据,帮助开发者更好地理解用户的需求和对产品的感知。 在实现这...

    酷软系列-MW8209量产工具_1.1.1.00 (090424正式版) [评价可免费]

    一、评价=评论加评价(评星星); 二、评价必须是下载完了该资源后的评价,没下载就评论无效; 三、如果正确评价了,返还积分可能需要等等,系统需要反应下。呵呵 评论时记得要评分。然后会返回给你花费的分再加1...

    asp自定义控件学习参考

    1. 用户输入:创建一个自定义评论控件,包括文本框、提交按钮等元素,处理用户输入的评论内容。 2. 数据存储:将评论保存到数据库,可能需要连接数据库,创建数据表,实现CRUD操作。 3. 显示评论:控件可以提供一个...

    proyectoFinal

    角色控制,至少具有三个级别,该级别计算: 管理员,完整的CRUD。 主持人,评论中的CRUD。 用户,您只能编辑自己的评论并创建新评论。 估值统计: 每个帖子,为用户使用视觉评分。 例如:小星星。 用户活动在...

    Scratch 益智眼力游戏:天体轨道.sb3

    ★ 收集星星,并购买你喜欢的新皮肤; ★ 努力完成所有成就; ★ 获得最高级别的惊喜(彩蛋)! SJA 分析数据: · 代码数量: 代码总数:2238 ,有效代码:2032 ,代码块:124 ; · 高级编辑: 扩展种类:0 ,...

    仿淘宝评价打分源码

    【标签】"打分"表明这个源码的核心功能是实现用户对商品的评分操作,可能包括五星级别的选择,以及平均分的计算和展示。在实际应用中,这样的打分系统通常会与评论、图片等结合,形成一个完整的用户反馈模块。 ...

    ajax经典实例大全

    用户对内容进行评分时,Ajax即时发送评分数据到服务器,同时更新显示的平均分和星星评级。 11. **实时评论** 在新闻或博客文章下面,用户发表评论后,无需刷新页面,其他用户即可立即看到新的评论。 12. **多级...

    Sharer项目说明1

    - **互动功能**:动态下方有心形图标(点赞)、消息图标(评论)和星星(收藏)供用户互动。如果动态作者是本人,还可以删除动态。 - **详细信息**:动态图片下方依次展示作者基本信息、动态文字、评论区和互动功能...

    网站等级图标(五星)

    例如,金色或亮色的五星可能表示高级别,而银色或暗色的星星则可能代表较低级别。设计师需要考虑颜色与等级之间的关联性,确保用户能快速理解图标含义。 4. **动态等级**:除了静态图标,一些网站还采用动态等级,...

    Android中SeekBar和RatingBar用法实例分析

    RatingBar则是用于展示评论级别的控件,通常显示为星形,用于用户给出评分。其基本用法包括: 1. **在XML布局文件中声明RatingBar**: ```xml android:layout_width="wrap_content" &lt;!-- 可根据需求调整 --&gt; ...

    2021最新微信漫画小程序全开源商业版.zip微信小程序模板源码

    【微信小程序概述】 微信小程序是腾讯公司推出的一种轻量级应用开发平台,它无需下载安装即可使用,极大地降低了用户获取应用的...同时,还可以学习如何打造一款商业级别的产品,包括用户留存策略、盈利模式等方面。

    基于J2EE在分布式环境下的底层结构(外文翻译+文献综述).rar

    4. **事务管理**:讲解J2EE的事务特性,如ACID属性、分布式事务和事务隔离级别。 5. **安全机制**:探讨J2EE的安全模型,包括认证、授权、加密和SSL/TLS等。 6. **源码分析**:可能包含实际的J2EE应用程序代码片段...

Global site tag (gtag.js) - Google Analytics