您的位置：首页 > Web前端 > JavaScript

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

2006-06-08 13:19 399 查看
[align=center]以下代码加入<head>区域[/align]
[align=left] [/align]
<script language="javascript">
<!--
//more javascript from http://www.smallrain.net
document.onmousemove = beSmart;
window.onload = init;
startEnlarge = 250;  // The distance to start enlarging the picture at, in pixels.
enlargeTo = 200;     // The number of Pixels to enlarge to.
minSize = 40;        // The number of Pixels to shrink to.

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>

[align=center]以下代码加入<body>区域[/align]
[align=left]<center><img src="jsimg/pic1.jpg" class="smart">
<img src="jsimg/pic2.jpg" class="smart">
<img src="jsimg/pic3.jpg" class="smart">
<img src="jsimg/pic4.jpg" class="smart">
<img src="jsimg/pic5.jpg" class="smart"></center>[/align]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  distance javascript class function image each
相关文章推荐
新的分享
章节导航