单击图片转换

最新推荐文章于 2021-08-19 22:01:29 发布

卢晶晶

最新推荐文章于 2021-08-19 22:01:29 发布

阅读量215

点赞数 1

分类专栏： Web前端 JS

本文链接：https://blog.youkuaiyun.com/Lucrecia666/article/details/83268070

版权

Web前端同时被 2 个专栏收录

14 篇文章

订阅专栏

9 篇文章

订阅专栏

<html>

<head>
    <meta charset="utf-8">
    <style>
        img {
            cursor: pointer;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <img src="pricess.jpg" id="imgid">
</body>
<script>
    imgobj = document.getElementById("imgid");
    //鼠标移入移出图片转换
    var a = 0; //不能放在函数体内，因为此处如果这样不是全局变量，函数执行一次后销毁
    imgobj.onclick = function() {
        if (a % 2 == 0) {
            this.src = "black.jpg";
        } else {
            this.src = "pricess.jpg";
        }
        a++;
        if (a = 100) a = 0;
    }
    imgobj.onmousleave = function() {
        this.src = "pricess.jpg";
    }

    //标题显示所在位置
    document.onmousemove = function(event) {
        var x, y;
        x = event.clientX;
        y = event.clientY;
        document.title = x + "-" + y;
        // imgobj.style.top = y + "px";         //图片随鼠标移动
        // imgobj.style.left = x + "px";
    }
</script>

</html>