鼠标越接近图像,图像会越大,它会很聪明的判断出图像中心距鼠标的距离
以下代码加入<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>
阅读更多
个人分类: javascript特效
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭