百度评分onclick与onmouseout冲突解决（带传参）

最新推荐文章于 2020-04-26 18:59:01 发布

aishigu5662

最新推荐文章于 2020-04-26 18:59:01 发布

阅读量204

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dengfan/p/4612449.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0}
        #wrapper{margin: 50px auto}
    </style>
    <script>
        window.onload = function(){
            fn('wrapper');
            fn('wrapper1');
            fn('wrapper')
        }
        function fn(id){
            var oDiv = document.getElementById(id)
            var oStar = oDiv.getElementsByTagName('strong')[0];
            var aImg = oStar.getElementsByTagName('img');
            var oText = oDiv.getElementsByTagName('span')[1];
            var arrText = ['很差','凑合','一般般','不错','很好'];
            var oClick = true;//申明一个布尔值，判断鼠标移除与点击之后的冲突，点击效果之后会连带鼠标移除，这里有冲突的

            for(var i=0;i<aImg.length;i++){
                aImg[i].index = i;
                aImg[i].onmouseover = function() { //鼠标移入函数
                    oClick = true;
                    oText.innerHTML = arrText[this.index];//后面文字
                    if (this.index < 2) {//鼠标到达位置小于2
                        for (var m= 0; m <= this.index; m++) {
                            aImg[m].src = 'img/nsg.gif';//变为黑灰色
                        }
                    } else if (1<this.index < 5) {//大于1小于5
                        for (var m= 0; m <= this.index; m++) {
                            aImg[m].src = 'img/sth.gif';//变为黑色
                        }
                    }
                    this.onmouseout = function(){//鼠标移除效果
                        if(oClick){
                            for(var i=0;i<aImg.length;i++){
                                aImg[i].src = 'img/nst.gif'//换换默认星星
                            }
                            oText.innerHTML ='点击进行评分！'
                        }
                    }
                }

                aImg[i].onclick = function(){//鼠标点击效果
                    oClick = false;
                    oText.innerHTML = arrText[this.index];//后面文字
                    if(this.index<2){
                        for(var i=0;i<= this.index;i++){
                            aImg[i].src = 'img/nsg.gif';
                        }
                    }else if(1<this.index<5){
                        for(var i=0;i<=this.index;i++){
                            aImg[i].src = 'img/st.gif';
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <div id="wrapper">
        <span>请评分：</span>
        <strong id="star">
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
        </strong>
        <span id="test">点击进行评分！</span>
    </div>
    <div id="wrapper1">
        <span>请评分：</span>
        <strong id="star1">
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
        </strong>
        <span id="test1">点击进行评分！</span>
    </div>
    <div id="wrapper2">
        <span>请评分：</span>
        <strong id="star2">
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
            <a href="javascript:"><img src="img/nst.gif" alt="1"/></a>
        </strong>
        <span id="test2">点击进行评分！</span>
    </div>
</body>
</html>
图片文件在的我文件里面，麻烦去找一下。

转载于:https://www.cnblogs.com/dengfan/p/4612449.html

aishigu5662

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度评分onclick与onmouseout冲突解决（带传参）

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0} #wrappe...
复制链接

扫一扫