鼠标越接近图像,图像会越大,它会很聪明的判断出图像中心距鼠标的距离

最新推荐文章于 2022-11-30 15:32:36 发布

95306

最新推荐文章于 2022-11-30 15:32:36 发布

阅读量1.1k

点赞数

分类专栏： javascript特效文章标签： distance javascript class function image each

本文链接：https://blog.csdn.net/liuliu26/article/details/780114

版权

javascript特效专栏收录该内容

11 篇文章 0 订阅

订阅专栏

以下代码加入<head>区域

centerOfPic = new Array();

// Calls the beSmart function to set each "smart" image to the correct size.
function init(){
beSmart();
}

function beSmart(){
for(i=0;i<document.images.length;i++){

    if(document.images[i].className == "smart"){
      mouseX = window.event.x;
      mouseY = window.event.y;
      imageX = document.images[i].offsetLeft + (document.images[i].width / 2);
      imageY = document.images[i].offsetTop + (document.images[i].height / 2);
      distance = Math.ceil(Math.sqrt(Math.pow(mouseX - imageX,2) + Math.pow(imageY - mouseY,2)));
      percent = distance / startEnlarge * enlargeTo;
      percent = enlargeTo - percent
         if(percent > minSize){
           document.images[i].style.width = percent;
           document.images[i].style.height = percent;
         } else {
           document.images[i].style.width = minSize;
           document.images[i].style.height = minSize;
         }
    }

}
}
// -->
</script>

以下代码加入<body>区域

95306

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标越接近图像,图像会越大,它会很聪明的判断出图像中心距鼠标的距离

以下代码加入区域 //more javascript from http://www.smallrain.netdocument.onmousemove = beSmart;window.onload = init;startEnlarge = 250; // The distance to start enlarging the picture at, in pixels.enlarg
复制链接

扫一扫