评论级别星星

最新推荐文章于 2024-04-25 19:18:54 发布

shuishui666

最新推荐文章于 2024-04-25 19:18:54 发布

阅读量91

点赞数

分类专栏： ajax 文章标签： ASP.net IE Ajax ASP Firefox

本文链接：https://blog.csdn.net/shuishui666/article/details/83676717

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前段时间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>