终于解决！图片随鼠标移动在FireFox下实现，另附一个好玩的图片随鼠标伸缩效果

最新推荐文章于 2022-02-21 00:25:48 发布

Sir_LuciFer

最新推荐文章于 2022-02-21 00:25:48 发布

阅读量527

点赞数

文章标签： firefox

本文链接：https://blog.csdn.net/Sir_LuciFer/article/details/4610062

版权

不用left/top处理（用padding代替）：

用left/top处理：

<html>
<head>
<style type="text/css">
#img1{
    position:absolute;          //重点!
}

</style>
<script type="text/javascript">
function show_pic(event){
    var x = event.clientX + document.body.scrollLeft;
    var y = event.clientY + document.body.scrollTop;
    var IMG = document.getElementById("img1");
    var IMG_height = IMG.height;
    var IMG_width = IMG.width;
    IMG.style.left = x - IMG_width/2;
    IMG.style.top = y - IMG_height/2;
}
</script>
</head>
<body>
<img src="1.jpg" id="img1">
<script type="text/javascript">
document.addEventListener("mousemove",show_pic,'event');
</script>
</body>
</html>

图片随鼠标伸缩效果:

<html>
<head>
<script type="text/javascript">
function show_pic(event){
    var x = event.clientX + document.body.scrollLeft;
    var y = event.clientY + document.body.scrollTop;
    var IMG = document.getElementById("img1");
    IMG.width = x;
    IMG.height = y;
}
</script>
</head>
<body>
<img src="1.jpg" id="img1">
<script type="text/javascript">
document.addEventListener("mousemove",show_pic,'event');
</script>
</body>
</html>

Sir_LuciFer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
终于解决！图片随鼠标移动在FireFox下实现，另附一个好玩的图片随鼠标伸缩效果

不用left/top处理（用padding代替）：function show_pic(event){ var x = event.clientX + document.body.scrollLeft; var y = event.clientY + document.body.scrollTop; var IMG = document.ge
复制链接

扫一扫