iT邦幫忙

0

javascript mouseover事件問題

最近在做一題是關於mouseover的問題,我有五顆星,滑鼠有左到右移過去會亮,由又到左移過來就關掉,以下是我的程式碼

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
        crossorigin="anonymous">
    <link rel="stylesheet" href="sh_style.css">
    <title>Hello, world!</title>
</head>
<style>
    table {
        width: 600px;
        border: 3px solid #009FCC;

        border-collapse: collapse;

        border-collapse: collapse;
        background-color: rgb(60, 255, 0);

    }

    td {

        padding-left: 8px;
        padding-right: 0px;
        width: 55px;
        border: 2px solid #008866;
        color: red;

    }

    .s {
        -webkit-filter: grayscale(1);
        /*沒有任何色彩的黑白影像*/
    }

    .n {
        -webkit-filter: grayscale(0);
        /*顏色不變*/
    }
</style>
<script>
    // http://blog.shihshih.com/css-filter/
    document.addEventListener("DOMContentLoaded", function () {
        var imgs = document.querySelectorAll("img.s");
        var imgsLen = imgs.length;
        for (var i = 0; i < imgsLen; i++) {
            imgs[i].addEventListener("mouseover", mouseOver);
            imgs[i].addEventListener("mouseout", mouseOut);
            // imgs[i].addEventListener("click",Click);
        }
    });
    
    function  mouseOver() {
    var num = this.id.substr(4);

    for (var i = 1; i <= num; i++) {
        document.getElementById("star" + i).className = "n";
    }
   
}
function mouseOut() {
    for (var i = num; i > 0; i--) {
        document.getElementById("star" + i).className = "s";
    }
  
}
</script>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class=" col-lg-3  grid-1">logo</div>
            <div class=" col-lg-6  grid-1">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link" href="九九乘法.html">homework1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="form.html">homework2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Hw3.html</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">homework4</a>
                    </li>
                </ul>
            </div>
            <div class=" col-lg-3  grid-1">logo</div>
        </div>
        <div class="row">
            <div class="col-lg-3 grid-1">logo</div>
            <div class="col-lg-6 grid-1">          
                    <center>
                        <img id="star1" class="s" src="images/star.jpg" />
                        <img id="star2" class="s" src="images/star.jpg" />
                        <img id="star3" class="s" src="images/star.jpg" />
                        <img id="star4" class="s" src="images/star.jpg" />
                        <img id="star5" class="s" src="images/star.jpg" />
                </center>
            </div>
            <div class="col-lg-3 grid-1">logo</div>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
        crossorigin="anonymous"></script>
</body>
</html>

我現在可以由左到右讓他亮,可是卻沒辦法由右到左讓他暗下來,我想請問我是錯在哪個地方?

froce iT邦高手 1 級 ‧ 2018-08-07 20:25:40 檢舉
mouseover沒有方向性吧?你這樣怎麼判別他是左到右還是右到左?
tenno081 iT邦新手 5 級 ‧ 2018-08-07 20:45:21 檢舉
應該說我目前把 mouseOut裡的i=num 改成i=5,這樣我我移到第一顆就會亮,移到第5顆,就全部都會亮,只是我現在是游標遠離就全部暗下來,有辦法游標離開時燈還是亮著,然後游標移過去才會暗的方法嗎?

2 個回答

5
froce
iT邦高手 1 級 ‧ 2018-08-08 01:06:06
最佳解答

https://jsbin.com/gokotaforo/1/edit?html,output
這樣?
你事件用錯了,根本不需要mouseOut。

看更多先前的回應...收起先前的回應...
weiclin iT邦高手 4 級 ‧ 2018-08-08 01:44:10 檢舉

簡單易懂

froce iT邦高手 1 級 ‧ 2018-08-08 09:38:59 檢舉

最近在認真學 vue.js,感覺js功力增進不少,但是學完後發現對工作上沒省多少事。XD

其實我是建議用點擊,用mouseover太容易誤操作了。
然後上面的code,因為用了es6,ie應該不能動。

tenno081 iT邦新手 5 級 ‧ 2018-08-08 12:18:16 檢舉

太感謝了,這寫法是老師給我們的提示,再請問
elm => elm.addEventListener這種是屬於LAMBDA寫法嗎?
這種的我還不太會用,我再研究看看,謝謝

froce iT邦高手 1 級 ‧ 2018-08-08 13:03:45 檢舉

es6的箭頭函數。
原本函數長成這樣。
還在學的可以先不要管這個,理解就好,我是懶得打字。

// 參數只有一個,並且只有一行回傳值時
var fn = function(i){
    return i + 1
}

// 參數只有一個以上,函數不只有一行回傳值時
var fn2 = function(x, y){
    x *= x;
    y += y;
    return [x, y]
}

用箭頭函數寫:

var fn  = i => i+1


var fn2 = (x, y) => {
    x *= x;
    y += y;
    return [x, y]
}

規則可以看這邊:
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions

0
joneshong
iT邦新手 5 級 ‧ 2018-08-08 00:15:55

可以試試看

  function mouseOver(e) {
    console.log(e)
  }
  function mouseOut(e) {
    console.log(e)
  }

比較 mouseOver與 mouseOut當中的 e.clientY
由左至右 => "mouseOver的 e.clientY" < "mouseOut的 e.clientY"
由右至左 => "mouseOver的 e.clientY" > "mouseOut的 e.clientY"

或許可以透過事件(event)當中的 Y值給您一些幫助
提供思路給您!加油

我要發表回答

立即登入回答