图片放大镜功能

最新推荐文章于 2020-12-09 04:14:38 发布

Curry 3O

最新推荐文章于 2020-12-09 04:14:38 发布

阅读量2.2k

点赞数 1

分类专栏： html和css JS jQuery DOM h5API

本文链接：https://blog.csdn.net/qq_42552393/article/details/98234393

版权

实现效果演示：

鼠标移入左侧缩略图时，小盒子和右边大图显示，并且小盒子跟随鼠标移动，右侧大图出现放大效果。我将用三种方法来实现。

1.原生js代码实现

思路：
1.原图窗口与放大窗口插入的是同一个图片，不过原图窗口的图片要适当缩小，放大窗口图片保持原大小，超出部分设置隐藏。
2.先定下放大比例，例如本文原图大小为10001000，可以把原图窗口的图片设为400400，这样放大窗口就能实现2.5倍的放大效果了。
3.首先实现小框框跟着鼠标移动的功能（小框框不能移出边界）。
4.再实现放大窗口中的图片随着小框框的移动实现自身移动。
5.鼠标(小框框)向右移动，放大窗口中的图片是要向左移动的！他们的方向总是相反。
6.小框框大小不是随意设置，与放大倍数有关。

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>放大镜</title>
	<style>
		*{
    
			margin: 0;
			padding: 0;
		}
		.container{
    
			width: 400px;
			height: 250px;
			position: relative;
			left: 250px;
			top: 150px;
		}
		.bigBox{
    
			width: 500px;
			height: 500px;
			border-radius: 50%;
			position: absolute;
			left: 430px;
			border: 1px solid #ccc;
			overflow: hidden;
			display: none;
		}
		.smallBox{
    
			position: absolute;
			border: 1px solid #ccc;
			font-size: 0;
		}
		.mask{
    
			width: 100px;
			height: 100px;
			cursor: move;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(255,255,0,0.4);
			display: none;
		}
		#bigPic{
    
			position: absolute;
		}
	</style>
	<script>
		window.onload = function(){
    
			var smallBox = document.getElementsByClassName('smallBox')[0];
			var bigBox = document.getElementsByClassName('bigBox')[0];
			var mask = document.getElementsByClassName('mask')[0];
			var box = document.getElementById('box');
			var bigPic = document.getElementById('bigPic');
			smallBox.onmouseover = function(){
    
				bigBox.style.display = "block";
				mask.style.display = "block";
			}
			smallBox.onmouseout = function(){
    
				bigBox.style.display = "none";
				mask.style.display = "none";
			}
			smallBox.onmousemove = function(event){
    
				//pageX,pageY
				//处理兼容性和滚动条
				var event = event || window.event;
				var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
      			var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
				var pageX = event.pageX || event.clientX + scollLeft;
				var pageY = event.pageY || event.clientY + scollTop;
				var targetX = pageX - box.offsetLeft - mask.offsetWidth/2;
				var targetY = pageY - box.offsetTop - mask.offsetHeight/2;
				//左边界
				if(targetX<0

最低0.47元/天解锁文章

Curry 3O

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
图片放大镜功能

实现效果演示：鼠标移入左侧缩略图时，小盒子和右边大图显示，并且小盒子跟随鼠标移动，右侧大图出现放大效果。我将用三种方法来实现。1.原生js代码实现思路：1.原图窗口与放大窗口插入的是同一个图片，不过原图窗口的图片要适当缩小，放大窗口图片保持原大小，超出部分设置隐藏。2.先定下放大比例，例如本文原图大小为10001000，可以把原图窗口的图片设为400400，这样放大窗口就能实现2.5倍的...
复制链接

扫一扫