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

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

图像距离变换与应用

1、象素间各种距离的定义及计算 我们知道,构成一幅数字图像最基本的元素是一个一个的像素点,也就是像素。理解像素间的一些基本关系是我们以后进行图形图形处理的基础和关键。如相邻像素(像素的邻域),像素...
  • yangdashi888
  • yangdashi888
  • 2016年11月24日 13:32
  • 1252

评价图像质量的新方式SSIM

【引言】在研究图像压缩算法的时候,最终需要对压缩的质量进行评价,现有的评价质量的方法是按照PSNR或者压缩前后图像的最大误差值来判定,PSNR起源于香浓理论,表达信息的相对多少,最大误差值仅能看出图像...
  • sunlinju
  • sunlinju
  • 2016年07月13日 15:50
  • 2391

鼠标事件比较与鼠标位置

Mouseenter和mouseover的区别这两个都是鼠标移入元素内部时触发,它们的区别是mouseenter事件没有冒泡阶段,而mouseover事件则有冒泡阶段,这是第一个区别。第二个区别是触发...
  • woxueliuyun
  • woxueliuyun
  • 2015年04月24日 09:41
  • 6864

OpenCV之利用鼠标获取坐标 响应鼠标消息

OpenCV之利用鼠标获取坐标                      分类:             OpenCV              2012-12-29 14:19   ...
  • weif6565
  • weif6565
  • 2014年10月09日 09:34
  • 2441

图像处理中的距离相关概念

一、距离定义 (1)欧式距离              ,实质上是矩形对角线距离 (2)city block ,实质上是从一个点到另外一个点的步数,并不能走斜线 (3)chessboard ,实质上...
  • Seven_year_Promise
  • Seven_year_Promise
  • 2017年11月01日 10:53
  • 134

opencv清晰度,色偏等评价函数

配置: VS2008 MFC  & opencv 2.4.4 步骤:1、新建 win32 控制台应用,空项目。 2、添加 main.cpp 文件。 3、添加 *.lib 库   说明...
  • qq_26499769
  • qq_26499769
  • 2016年07月28日 17:12
  • 1199

10131越大越聪明

(原题详见UVa10131) 本文主要包含以下内容: 1.数学模型的建立 2.递推伪代码 3.具体实现代码 4.总结 关键字:动态规划    DAG 1.数学模型的建...
  • bujuan827
  • bujuan827
  • 2016年08月11日 19:53
  • 119

【图像处理】图像频域基础

一般我们看到的图像可以表示为函数f(x,y),x和y是空间上的坐标,此时的图像称为空间域图像;经过频域变换后的图像称为频域图像。离散情况下,一维傅里叶变换有如下形式。同时这里还证明了,对原始数据乘以(...
  • lpsl1882
  • lpsl1882
  • 2016年05月06日 10:08
  • 1082

图像匹配(欧式距离)

图像匹配之欧式距离算法   (2016-12-09 14:23:28) 转载▼ 标签:  图像处理   欧式距离算法   python ...
  • twinkle_star1314
  • twinkle_star1314
  • 2017年03月07日 22:03
  • 1065

图像中目标特征分类

图像目标的特征大致可分为:视觉特征、统计特征、da
  • yang090510118
  • yang090510118
  • 2014年06月17日 10:49
  • 1033
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标越接近图像,图像会越大,它会很聪明的判断出图像中心距鼠标的距离
举报原因:
原因补充:

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