使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小

时间：2022-11-10 10:33:08

查看本章节

查看作业目录

需求说明：

使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小

  • 随着鼠标的移动，实时计算鼠标与图片中心点的距离，在输入框中显示图片的缩放系数
  • 放大倍数不超过3 倍，缩小不小于50%

使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小

实现思路：

  1. 在页面上编写输入框用于显示缩放系数，并使用<img>标签显示一幅图片
  2. 获取图片中心点的坐标
  3. 获取鼠标移动时的坐标
  4. 使用勾股定理计算出鼠标与图片中心点之间的距离
  5. 将距离转换为缩放系数并显示在输入框中
  6. 根据缩放系数改变<img> 标签的宽度和高度

实现代码：



<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			#div{

				width: 100%;

				position: absolute;

				bottom: 0;

				text-align: center;

			}

			img{

				width: 300px;

		     	height: 150px;

		    }

			input{

				text-align: center;

				position: absolute;

			}

		</style>

	</head>

	<body>

		<script type="text/javascript">

			window.onload=function(){

				var input=document.getElementById("input");

				var div=document.getElementById("div");

				var img=document.getElementById("img");

				window.onmousemove=function(){

					var x=img.offsetLeft + img.offsetWidth/2;

					console.log(x)

					var y=img.offsetTop + img.offsetHeight/2;

					console.log(y)

					var b=event.clientX-x;

					var a=event.clientY-y;

					var c=Math.sqrt(Math.pow(b,2)+Math.pow(a,2));

					var scale=Math.floor(c)/100-1;

					if (scale<0.5) {

						scale=0.5;

					} else if(scale>3){

						scale=3;

					}

					input.value=scale;

					img.style.width=scale*300+"px";

					img.style.height=scale*150+"px";

				};

			};

		</script>

		<p>图片缩放系数：<input type="text" id="input"/></p>

		<div id="div">

			<img src="img/img_1.jpg"  id="img"/>

		</div>

	</body>

</html>

使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小的更多相关文章

  1. JavaScript中的Math对象

    Math对象中提供的计算功能执行起来比你在代码中写的js要快得多,这是它的一个很好的优点.   属性: 属性 说明 Math.E 即常量e的值 Math.LN10 ln10 Math.LN2 ln2 ...

  2. JavaScript -- 时光流逝（四）：js中的 Math 对象的属性和方法

    JavaScript -- 知识点回顾篇(四):js中的 Math 对象的属性和方法 1. Math 对象的属性 (1) E :返回算术常量 e,即自然对数的底数(约等于2.718). (2) LN2 ...

  3. 使用 JavaScript 中的 window 对象执行计时操作，完成一个抽奖程序

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 window 对象执行计时操作,完成一个抽奖程序 实现思路: 在 HTML 页面中放置背景图片.转盘和指针 3 张图片,并设置指 ...

  4. javascript常用的Math对象的方法

    简介 Math对象是在程序编程中用于执行一些数学任务的.Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数, ...

  5. JavaScript中的global对象，window对象以及document对象的区别和联系

    JavaScript中的global对象,window对象以及document对象的区别和联系 一.概念区分:JavaScript中的global对象,window对象以及document对象 1.g ...

  6. JavaScript中的事件对象

    JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...

  7. JavaScript中创建字典对象（dictionary）实例

    这篇文章主要介绍了JavaScript中创建字典对象(dictionary)实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下 对于JavaScript来说,其自身的Array对象 ...

  8. Javascript学习1 - Javascript中的类型对象

    原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...

  9. 简单使用JSON&comma;JavaScript中创建 JSON 对象&lpar;一&rpar;

    JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更易解析. ...

随机推荐

  1. linux 下 修改mysql账号密码

    1.root用户登录到mysql数据库代码示例:/usr/local/mysql/bin/mysql -u root -p (输入密码进入mysql)2.进入mysql,输入:代码示例:use mys ...

  2. AOP常用术语

    1.连接点(Joinpoint) 程序执行的某个特定位置:如类开始初始化前,类初始化后,类某个方法调用前,调用后,方法跑出异常后.一个类或一段程序代码拥有一些具有边界性质的特定点.这些代码中的特定点就 ...

  3. 日期操作类--Date类

    Date-API ava.util包提供了Date类来封装当前的日期和时间.Date类提供两个构造函数来实例化Date对象.第一个构造函数使用当前日期和时间来初始化对象. Date( ) 第二个构造函 ...

  4. powershell命令大全

    Name Category Synopsis ---- -------- -------- ac Alias Add-Content asnp Alias Add-PSSnapin clc Alias ...

  5. Hello World程序

    本文最初发表于2015-8-??,是由别的地方迁移过来的 本文利用改写内存的办法在屏幕*显示“Hello world”字符串. 首先我们需要了解80*25彩色字符模式显示缓冲区的结构. 〉〉内存中B ...

  6. 为oracle中的表格增加列和删除列

    http://blog.csdn.net/rainharder/article/details/6663458 alter table 表名 drop column 列名eg:alter table ...

  7. 【Alpha】第七次Daily Scrum Meeting

    GIT 一.今日站立式会议照片        二.会议内容 1.讨论送礼物的方法和对象,使功能更加完善. 2.对于程序还存在的问题提出自己的看法,尽量让功能更加的饱满. 三.燃尽图 四.遇到的困难 能 ...

  8. Python pyc知识了解

    pyc 是什么 1. Python是一门解释型语言? 我初学Python时,听到的关于Python的第一句话就是,Python是一门解释性语言,我就这样一直相信下去,直到发现了*.pyc文件的存在.如 ...

  9. jQuery&colon;SP&period;NET Autocomplete Textbox Using jQuery&comma; JSON and AJAX

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQueryAutocomp ...

  10. HTTP请求报文和响应报文

    HTTP请求报文 GET / HTTP/1.1 Host: www.baidu.com Connection: keep-alive Upgrade-Insecure-Requests: 1 User ...

相关文章