今天我们介绍一种常见的网页特效——图片放大。通过javascript脚本可以很方便地实现，举个例子，当用户在网页上点击某个图片时，可以让该图片放大，以便于用户更好地查看细节。具体实现方法有很多，我们接下来通过代码和实例来介绍其中一种方法。
首先，我们需要一个相关的HTML页面来测试我们的脚本。这里我们先放一个简单的html代码。
```图片放大示例
点击图片可以放大！
``` 在这个HTML页面中，我们置入了一张图片，并设定其id为“largeImg”，同时还添加了一个“p”标签，简单说明用户可以通过点击图片来放大。同时我们还引入了一个名为“enlarge.js”的脚本。 接下来，我们就该来写这个脚本了。 ```js window.onload = function () { // 获取图片并改变其鼠标指针样式 var img = document.getElementById("largeImg"); img.style.cursor = 'crosshair'; //获取图片的原始大小和位置 var W = img.width; var H = img.height; var original_left = img.offsetLeft; var original_top = img.offsetTop; //当鼠标点击图片时，获取当前位置并创建一个新的大图片元素。 img.onclick = function enlarge() { var x = event.clientX; var y = event.clientY; var largeImgUrl = img.src; var largeImg = document.createElement("img"); largeImg.id = "enlargeImg"; largeImg.setAttribute("src", largeImgUrl); largeImg.style.position = "absolute"; largeImg.style.cursor = "move"; largeImg.style.zIndex = 9999; largeImg.style.top = y + 10 + "px";//设定大图上离鼠标的距离 largeImg.style.left = x + 10 + "px";//设定大图左离鼠标的距离 largeImg.style.width = W * 1.7 + "px";//设定大图宽度 largeImg.style.height = H * 1.7 + "px";//设定大图高度 document.body.appendChild(largeImg); //当鼠标移动时，跟随鼠标一起移动 largeImg.onmousemove = function move() { var X = event.clientX; var Y = event.clientY; largeImg.style.left = X + 10 + "px"; largeImg.style.top = Y + 10 + "px"; } //当鼠标松开时，移除大图元素 largeImg.onmouseup = function () { document.body.removeChild(largeImg); img.style.position = "static";//为了避免大图移除时，留下了img的移动结构，需要清除style中的position属性。 } } } ``` 上面的这段js代码也很简单，我们来仔细看一下。首先，在页面加载完成后，我们获取图片的元素，并将其鼠标指针设定为画笔。 然后，我们获取该图片的原始大小和位置，并为该图片添加一个“onclick”的事件响应函数。 当鼠标点击图片时，会触发事件响应函数“enlarge()”。在该函数中，我们首先获取当前的鼠标位置，并根据原始图片的大小和位置，创建一个新的“img”元素。这个元素的内容与原先的图片相同，但其宽度和高度被放大1.7倍。 将新的图片元素置于页面上后，我们为该元素添加一个“onmousemove”事件响应函数，并在该函数中，让该元素随着鼠标的移动而移动。 最后，我们为该元素添加一个“onmouseup”事件响应函数，在该函数中，当鼠标松开时，移除改大的图片元素，并清除掉原始图片的position属性。 至此，我们的图片放大功能已经完成了。还有什么需要改进的地方吗？当然有。比如，用户可能会频繁点击图片，而每次都重新创建一个新的大图元素，这样可能会极大地拖累浏览器性能。如果我们能够保存已经创建的大图元素，并在用户需要时直接显示，而不是重新创建，那将会大大提升用户体验。 在此，我们就不再展开了，大家可以自行扩展和改进这个javascript脚本，实现更多的功能和优化。