鼠标跟随（5-1）

item

尚未解决问题

mouseleave事件触发时，无法设置动画，缓慢离开；

图11
显示计算大图片位置坐标图9

描述

通过设置left和top的值移动

  • [ ] 给小图绑定mouseenter事件

  • 当事件触发，缓慢显示mark从display:none;改为block状态

    1
    2
    3
    4
    5
    //只能判断标签中style属性(花了几个小时的问题)
    if (mark.style.display == "none") { 
                mark.style.display = "block";
                mark.style.animation = "enter 0.8s";
    }

  • 根据图9计算出大图mark出现的位置

    1
    2
    mark.style.left = e.clientX - box.offsetLeft + 10 + "px";
           mark.style.top = e.clientY - box.offsetTop + 10 + "px";

  • 根据事件源e.target获得当前触发事件的自定义属性bigImag来修改mark子元素img的src（实现切换不同图片的大图）

    1
    2
    var getNewSrc = e.target.getAttribute("bigImg");
               mark.firstElementChild.setAttribute("src", getNewSrc);

  • [ ] 继续给小图绑定mousemove事件

    随着鼠标移动修改（根据图9计算出）大图mark的位置（实现跟随鼠标移动）

  • [ ] 再继续给小图绑定mouseleave事件
    消除mark从display:block;改为none状态

  • 如下

    1
    2
    3
    if (mark.style.display == "block") {
                    mark.style.display = "none";
                }

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    body,
    div {
        margin: 0;
        padding: 0;
    }
    
    #box {
        position: relative;
        width: 480px;
        margin: 20px auto;
    }
    
    #box img {
        display: block;
        float: left;
        width: 100px;
        height: 75px;
        margin-left: 10px;
        border: 5px solid #E6E6FA;
        border-radius: 5%;
    }
    
    #mark {
        box-sizing: border-box;
        position: absolute;
        margin-left: 10px;
        width: 400px;
        height: 300px;
        border-radius: 5%;
        /*transition: 0.05s;*/
    }
    
    @keyframes enter {
        from {
            width: 0;
            height: 0;
        }
        to {
            width: 400px;
            height: 300px;
        }
    }
    
    @keyframes leave {
        from {
            width: 400px;
            height: 300px;
        }
        to {
            width: 0;
            height: 0;
        }
    }
    
    #mark img {
        width: 100%;
        height: 100%;
        margin-left: 0px;
    }
    </style>
</head>
<body>
    <div id="box">
        <img src="img/1.jpg" bigImg="img/1_bigger.jpg">
        <img src="img/2.jpg" bigImg="img/2_bigger.jpg">
        <img src="img/3.jpg" bigImg="img/3_bigger.jpg">
        <img src="img/4.jpg" bigImg="img/4_bigger.jpg">
        <div id="mark" style="display:none">
            <img src="img/1_bigger.jpg">
        </div>
    </div>
    <script type="text/javascript">
    var box = document.getElementById("box");
    var mark = document.getElementById("mark");
    for (var i = 0; i < box.childNodes.length; i++) {
        box.childNodes[i].onmouseenter = function(e) {
            e = e || window.event;
            e.target = e.target || e.srcElement;
            mark.style.animation = "enter 0.8s";
            if (mark.style.display == "none") { //只能判断标签中style属性                
                mark.style.display = "block";
                
                mark.style.left = e.clientX - box.offsetLeft + 10 + "px";
                mark.style.top = e.clientY - box.offsetTop + 10 + "px";
                var getNewSrc = e.target.getAttribute("bigImg");
                mark.firstElementChild.setAttribute("src", getNewSrc);
            }
        }
        box.childNodes[i].onmousemove = function(e) {
            e = e || window.event;
            mark.style.left = e.clientX - box.offsetLeft + 10 + "px";
            mark.style.top = e.clientY - box.offsetTop + 10 + "px";
        }
        box.childNodes[i].onmouseleave = function(e) {
            if (mark.style.display == "block") {
                mark.style.display = "none";
            }
        }
    }
    </script>
</body>
</html>