关闭

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

标签: distancejavascriptclassfunctionimageeach
910人阅读 评论(0) 收藏 举报
分类:
以下代码加入<head>区域
 

<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>

以下代码加入<body>区域
<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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:15966次
    • 积分:306
    • 等级:
    • 排名:千里之外
    • 原创:12篇
    • 转载:0篇
    • 译文:1篇
    • 评论:2条
    文章分类
    最新评论