JavaScript鼠标交互代码示例：图像缩放功能

需积分: 9 135 浏览量更新于2024-09-15 收藏 1KB TXT 举报

"这篇资源是关于JavaScript（JS）的代码示例，主要展示了如何通过鼠标事件来调用JS脚本，动态改变界面背景颜色，并实现图片的缩放功能，适用于初学者进行学习和实践开发。" 这篇代码的核心是利用JavaScript进行鼠标事件处理，以及动态修改页面元素的属性。首先，HTML部分设置了两个`div`元素，一个用于显示原图（`yuantu`），另一个用于显示放大后的图片（`hidd`）。`yuantu`中的图片在鼠标移动时会触发`onmousemove`事件，`hidd`则在鼠标离开时通过`onMouseOut`事件隐藏。 JavaScript部分首先设置了变量`zoomRate`用于控制图片的放大比例，然后在`zoomImg.src=srcImg.src;`这行代码中，将原图的源地址赋值给了放大图，确保它们显示相同的图片。接着，通过调整原图的高度使其缩小一半，以便于后续的放大操作。函数`zoom()`是关键，当鼠标移动到图片上时，该函数会被调用，显示放大图并计算放大位置。`hidd.style.display="";`将隐藏的放大图显示出来。接下来，通过事件对象`event`获取鼠标的坐标，并计算出放大图应该放置的位置，以保持放大中心与鼠标位置一致。 `var h=elm.offsetHeight/zoomRate/2;`和`var w=elm.offsetWidth/zoomRate/2;`这两行代码计算了放大图的一半高度和宽度，以便于确定其在页面上的正确位置。然后，根据鼠标位置`event.x`和`event.y`调整放大图的`marginLeft`和`marginTop`，使放大图的中心对准鼠标位置。最后，`zoomImg.parentNode.style.width`和`zoomImg.parentNode.style.height`分别设置放大图容器的宽度和高度，使其适应放大后的图片大小。这个简单的例子展示了JavaScript如何响应用户交互，动态改变页面元素，对于学习JavaScript事件处理和动态效果的初学者来说是一个很好的起点。通过这种方式，开发者可以创建更加生动、互动的网页界面。

<html>
<head>
<title>emu</title>
<style type="text/css">

</style>
</head>
<body>
<div id="yuantu"><img src=http://www.baidu.com/img/baidu_logo.gif onmousemove="zoom()" onMouseOut="zoom2()" id=srcImg> </div>
<div id="hidd" style="display:none"><img id=zoomImg></div>
<div id="ceshi"></div>
<SCRIPT LANGUAGE="javascript">
<!--
zoomImg.src = srcImg.src;
srcImg.height = srcImg.height/2; //
var zoomRate = 5;
zoomImg.height = srcImg.height*zoomRate;
zoomImg.parentNode.style.width = srcImg.width;
zoomImg.parentNode.style.height = srcImg.height;
function zoom(){
hidd.style.display="";
var elm = event.srcElement;
h = elm.offsetHeight/zoomRate/2; //elm.offsetHeight/zoomRate/2
w = elm.offsetWidth/zoomRate/2;
var x = event.x-elm.offsetLeft;

下载后可阅读完整内容，剩余1页未读，立即下载

jinxinyuz

粉丝: 0
资源: 2

JavaScript鼠标交互代码示例：图像缩放功能

js代码高亮显示 JavaScript代码高亮 jsp

JS恶意代码大总结

java js引擎调试js代码

js代码说$不存在怎么办？

Node.js支持python写的代码吗？

.js .js.map

webpack js库 打包 代码混淆

highlight.js的高亮代码样式不好看

代码生成（JavaScript太阳自转）

vscode t4模板生成js

最新资源

webpack js库打包代码混淆