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

原创 2006年06月08日 13:19:00
以下代码加入<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>

相关文章推荐

BAT业务版图越摊越大,谁会跌出三巨头行列?

作者:俊世太保 BAT三家中国的互联网巨头在过去的一年中,通过多起大规模的资本运作全方位的补全了各自的业务线。三者的估值随着一次次的并购交易都得到大幅提升,而BAT三巨头中百度的估值增长幅度相对...

【解题报告】uva10131_Is Bigger Smarter?(越大越聪明, dp, LIS)

题目大意: 首先输入m和n,接下来输入一个m行n列的矩阵,每点的值代表该位置的花费。求从矩阵第一列的任意位置移动到最后一列的任意位置的最小花费及路径。若存在多条路径,输出字典序最小的。路径总花费...

UVa Problem 10131 Is Bigger Smarter? (越大越聪明?)

// Is Bigger Smarter? (越大越聪明?) // PC/UVa IDs: 111101/10131, Popularity: B, Success rate: high Level:...

OpenCV图像处理->鼠标移动区域放大

首先 cvSetMouseCallback( "img", on_mouse, 0 );

opencv图像处理之鼠标事件(矩形roi绘图)

为满足图像处理要求,博主写此简易代码有如下作用: 1、根据感兴趣区域做深度学习标签; 2、提取感兴趣区域进行目标跟踪; 3、对感兴趣区域进行进一步操作。...
  • samylee
  • samylee
  • 2017年01月22日 22:31
  • 710

2.9 opencv2 使用鼠标绘制矩形并截取和保存矩形区域图像

目录(?)[-] 前言  第一节 函数介绍 回调函数鼠标响应处理函数 第二节 鼠标操作实例 示例程序代码程序运行结果分析 第三节参考资料                          ...

opencv2 使用鼠标绘制矩形并截取和保存矩形区域图像

前言        好长时间没写博文了,今天偷偷懒写篇关于opencv2中鼠标响应操作的文章。       鼠标操作属于用户接口设计,以前一直使用Qt来做,但是如果只需要简单的鼠标,键盘操...

opencv2鼠标选择感兴趣区域后对两幅图像进行均值漂移算法

之前的鼠标事件的响应以及均值漂移算法算法如果已经懂了,那么现在的程序就是合成了一下,就直接上代码了 #include #include #include #include #include #incl...

纯CSS实现图像鼠标悬停效果

今天来看一组纯CSS实现的鼠标悬停效果,在线研究代码点效果一、效果二、效果三,下载收藏点这里。...
  • whqet
  • whqet
  • 2014年04月03日 20:29
  • 15199

OpenCV--鼠标响应Kinect彩色图像显示深度信息

#include #include #include #include using namespace std; struct CvKinectImage { IplImage...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标越接近图像,图像会越大,它会很聪明的判断出图像中心距鼠标的距离
举报原因:
原因补充:

(最多只允许输入30个字)