使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
查看本章节
查看作业目录
需求说明:
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
- 随着鼠标的移动,实时计算鼠标与图片中心点的距离,在输入框中显示图片的缩放系数
- 放大倍数不超过3 倍,缩小不小于50%
实现思路:
- 在页面上编写输入框用于显示缩放系数,并使用<img>标签显示一幅图片
- 获取图片中心点的坐标
- 获取鼠标移动时的坐标
- 使用勾股定理计算出鼠标与图片中心点之间的距离
- 将距离转换为缩放系数并显示在输入框中
- 根据缩放系数改变<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对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小的更多相关文章
- JavaScript中的Math对象
Math对象中提供的计算功能执行起来比你在代码中写的js要快得多,这是它的一个很好的优点. 属性: 属性 说明 Math.E 即常量e的值 Math.LN10 ln10 Math.LN2 ln2 ...
- JavaScript -- 时光流逝(四):js中的 Math 对象的属性和方法
JavaScript -- 知识点回顾篇(四):js中的 Math 对象的属性和方法 1. Math 对象的属性 (1) E :返回算术常量 e,即自然对数的底数(约等于2.718). (2) LN2 ...
- 使用 JavaScript 中的 window 对象执行计时操作,完成一个抽奖程序
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 window 对象执行计时操作,完成一个抽奖程序 实现思路: 在 HTML 页面中放置背景图片.转盘和指针 3 张图片,并设置指 ...
- javascript常用的Math对象的方法
简介 Math对象是在程序编程中用于执行一些数学任务的.Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数, ...
- JavaScript中的global对象,window对象以及document对象的区别和联系
JavaScript中的global对象,window对象以及document对象的区别和联系 一.概念区分:JavaScript中的global对象,window对象以及document对象 1.g ...
- JavaScript中的事件对象
JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...
- JavaScript中创建字典对象(dictionary)实例
这篇文章主要介绍了JavaScript中创建字典对象(dictionary)实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下 对于JavaScript来说,其自身的Array对象 ...
- Javascript学习1 - Javascript中的类型对象
原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...
- 简单使用JSON,JavaScript中创建 JSON 对象(一)
JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更易解析. ...
随机推荐
- [Windows编程]模块遍历
模块遍历 整体思路 1.创建进程快照 2.遍历首次模块 3.继续下次遍历 4.模块信息结构体 相关API的调用 创建进程快照API HANDLE WINAPI CreateToolhelp32Snap ...
- Java对象的创建过程:类的初始化与实例化
一.Java对象创建时机 我们知道,一个对象在可以被使用之前必须要被正确地实例化.在Java代码中,有很多行为可以引起对象的创建,最为直观的一种就是使用new关键字来调用一个类的构造函数显式地创建对象 ...
- Docker的常用命令总结
一.普通指令 启动 Docker sudo systemctl start docker 停止 Docker sudo systemctl stop docker 普通重启 Docker sudo s ...
- 使用 IntelliJ IDEA 远程调试 Tomcat
一.本地 Remote Server 配置 添加一个Remote Server 如下图所示 1. 复制JVM配置参数,第二步有用 2. 填入远程tomcat主机的IP地址和想开启的调试端口(自定义) ...
- 什么是maven(二)
转自博主--一杯凉茶 maven项目构建ssh工程(父工程与子模块的拆分与聚合) 前一节我们明白了maven是个什么玩意,这一节就来讲讲他的一个重要的应用场景,也就是通过maven将一个ssh项目 ...
- 【力扣】122. 买卖股票的最佳时机 II
给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交易(你必须在再次 ...
- ctypes与numpy.ctypeslib的使用
numpy ctypeslib 与 ctypes接口使用说明 作者:elfin 目录 一.numpy.ctypeslib使用说明 1.1 准备好一个C++计算文件 1.2 ctypeslib主要的五个 ...
- python3约瑟夫环问题
问题描述:n个人围成一个圈,从第一个人开始数1,数到第k个出局,然后下一个人继续从1数,求出局人编号 思路:将所有人编号放到数组里,一个人出局后,下一个人加上k对数组长度求余,得出下一个要删除的编号. ...
- python模块(三)
hashilib模块 hashilib模块的主要作用是加密,可以将明文数据通过一系列算法转化为秘闻数据. 目的是为了数据的安全. 加密算法包括md系列,sha系列,base系列,hmac系列. 基本使 ...
- Samba 源码解析之SMBclient命令流
smbclient提供了类似FTP式的共享文件操作功能, 本篇从源码角度讲解smbclient的实现,smbclient命令的具体使用可通过help命令和互联网查到大量资料. 以下从源码角度分析一个s ...