jQuery学习：点击元素实现放大镜效果

最新推荐文章于 2023-01-10 09:36:51 发布
最新推荐文章于 2023-01-10 09:36:51 发布
阅读量613 收藏 1
点赞数
分类专栏： jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47295886/article/details/127928291
版权

 

 

 重点在于设置

如何更新left  top值 根据鼠标的移动

			function bigImg() {
				var $mask = $('#mask'); //遮挡需要加显示
				var $mediuImg = $('#mediuImg'); //鼠标移入图片需要控制效黄块的显示
				var $loading = $('#loading');
				var $largeImg = $('#largeImg');
				var $largeImgContainer = $('#largeImgContainer');
				var $mediuImgContainer = $('#mediuImgContainer');
				var $mediuImgContainerHeight = $mediuImgContainer.height();
				var $mediuImgContainerWidth = $mediuImgContainer.width();
				$mediuImgContainer.hover(function() {
						//显示 并得出left top值
						$mask.show();
						//动态加载大图 加载对应大图的src
						var src = $mediuImg.attr('src');
						$largeImgContainer.show();
						//图片的加载完成需要针对图片是否加载成功
						//on机制--加载单一图片
						$largeImg.attr('src', src);
						//只有在图片加载完成后才有意义
						$largeImg.on('load', function() {

							//监听鼠标移动事件
							$mediuImgContainer.mousemove(function(event) {
								//在移动过程中不断调用
								var left = 0;
								var top = 0;
								//给小方块定位
								//鼠标的位置
								left = event.clientX - $mediuImgContainer.offset().left - $mask.width() / 2;
								top = event.clientY - $mediuImgContainer.offset().top - $mask.height() / 2;
								//区间需要有限制 0-$mediuImgContainerWidth-$mask.width()
								//0-0-$mediuImgContainerHeight-$mask.height()
								if (left < 0) {
									left = 0
								} else if (left > $mediuImgContainerWidth - $mask.width()) {
									left = $mediuImgContainerWidth - $mask.width();
								}
								if (top < 0) {
									top = 0
								} else if (top > $mediuImgContainerHeight - $mask.height()) {
									top = $mediuImgContainerHeight - $mask.height();
								}

								$mask.css({
									left: left,
									top: top
								});

								//移动大图片
								//区间需要有限制 0-$mediuImgContainerWidth-$mask.width()   2倍关系
								//0-0-$mediuImgContainerHeight-$mask.height()
								left = left * 2;
								top = top * 2;
								//设置大图的坐标
								if (left < 0) {
									left = 0
								} else if (left > ($mediuImgContainerWidth - $mask.width()) * 2) {
									left = (left > ($mediuImgContainerWidth - $mask.width()) * 2) * 2
								}

								if (top < 0) {
									top = 0
								} else if (top > ($mediuImgContainerHeight - $mask.height()) * 2) {
									top = (top > $mediuImgContainerHeight - $mask.height()) * 2
								}
								
								$largeImg.css({
									left: -left,
									top: -top
								});
								//显示大图
								$largeImg.show();
								//隐藏加载记录条
								$loading.hide();
							});
						});


					},
					function() {
						$mask.hide();
							$largeImgContainer.hide();
						
						

					});


			}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.6.1.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style-type: none;
			}

			#product_intro {
				position: relative;

				height: 600px;
				width: 520px;
				left: 100px;
				top: 100px;
			}

			#mediuImg {
				width: 520px;
				height: 450px;
			}

			.backward,
			.forword {
				display: inline-block;
				font-size: 60px;
				width: 60px;
				height: 150px;
				line-height: 150px;
				background: yellow;
				float: left;
				text-decoration: none;
				overflow: hidden;


			}

			.forword {
				position: absolute;
				left: 0px;
				top: 450px;
			}


			.backward {
				position: absolute;
				left: 460px;
				top: 450px;

			}

			.color {
				width: 60px;
				height: 150px;
				background-color: black;

			}

			#tmp {
				position: absolute;
				float: left;
				width: 450px;
				height: 150px;
				top: 450px;
				overflow: hidden;
				left: 60px;
				background: #000;

			}

			#icon_list {
				position: absolute;
				height: 150px;
				width: 800px;
				float: left;
				font-size: 0px;
			}

			#icon_list li {
				width: 100px;
				height: 150px;
				font-size: 30px;
				font-weight: bold;
				text-align: center;
				line-height: 150px;
				display: inline-block;


			}

			#mediuImgContainer {
				position: absolute;

			}

			#mask {
				width: 200px;
				height: 200px;
				background-color: coral;
				position: absolute;
				left: 0px;
				opacity: 0.5;
				display: none;
			}

			#largeImgContainer {
				position: absolute;
				width: 400px;
				height: 400px;
				left: 530px;
				top: 200px;
				overflow: hidden;
				display: none;

			}

			#largeImgContainer img {
				/* 两倍关系 */
				width: 1040px;
				/* 520 */
				height: 900px;
				/* 450 */
				display: none;
			}

			#largeImg {
				position: absolute;
				top: 800px;

			}
		</style>
	</head>
	<body>
		<div id="product_intro">
			<span id="mediuImgContainer">
				<img id="mediuImg" src="../../img/a0.png" alt="图片">
				<span id="mask"></span><!-- 遮挡 -->
			</span>
			<span id="largeImgContainer">
				<img id="loading" src="../../img/load.png" alt="未加载成功时候的显示"> <!-- 显示一个预加载的状态 网不好的状态显示 -->
				<img id="largeImg" alt="显示其中的1/4">
			</span>


			<div id="tmp">
				<ul id="icon_list">
					<li style="background: #2ab;">1</li>
					<li style="background: #bfa;">2</li>
					<li style="background: #acb;">3</li>
					<li style="background: #897;">4</li>
					<li style="background: #345;">5</li>
					<li style="background: #a56;">6</li>
					<li style="background: #189;">7</li>
					<li style="background: #c78;">8</li>
				</ul>
			</div>
			<!-- 点击监听 -->
			<a class="backward" href="#">&#x2192;</a>
			<a class="forword" href="#">&#x2190;</a>

		</div>
		<script>
			moveMiniImg();
			hoverMiniImg();
			bigImg()

			function bigImg() {
				var $mask = $('#mask'); //遮挡需要加显示
				var $mediuImg = $('#mediuImg'); //鼠标移入图片需要控制效黄块的显示
				var $loading = $('#loading');
				var $largeImg = $('#largeImg');
				var $largeImgContainer = $('#largeImgContainer');
				var $mediuImgContainer = $('#mediuImgContainer');
				var $mediuImgContainerHeight = $mediuImgContainer.height();
				var $mediuImgContainerWidth = $mediuImgContainer.width();
				$mediuImgContainer.hover(function() {
						//显示 并得出left top值
						$mask.show();
						//动态加载大图 加载对应大图的src
						var src = $mediuImg.attr('src');
						$largeImgContainer.show();
						//图片的加载完成需要针对图片是否加载成功
						//on机制--加载单一图片
						$largeImg.attr('src', src);
						//只有在图片加载完成后才有意义
						$largeImg.on('load', function() {

							//监听鼠标移动事件
							$mediuImgContainer.mousemove(function(event) {
								//在移动过程中不断调用
								var left = 0;
								var top = 0;
								//给小方块定位
								//鼠标的位置
								left = event.clientX - $mediuImgContainer.offset().left - $mask.width() / 2;
								top = event.clientY - $mediuImgContainer.offset().top - $mask.height() / 2;
								//区间需要有限制 0-$mediuImgContainerWidth-$mask.width()
								//0-0-$mediuImgContainerHeight-$mask.height()
								if (left < 0) {
									left = 0
								} else if (left > $mediuImgContainerWidth - $mask.width()) {
									left = $mediuImgContainerWidth - $mask.width();
								}
								if (top < 0) {
									top = 0
								} else if (top > $mediuImgContainerHeight - $mask.height()) {
									top = $mediuImgContainerHeight - $mask.height();
								}

								$mask.css({
									left: left,
									top: top
								});

								//移动大图片
								//区间需要有限制 0-$mediuImgContainerWidth-$mask.width()   2倍关系
								//0-0-$mediuImgContainerHeight-$mask.height()
								left = left * 2;
								top = top * 2;
								//设置大图的坐标
								if (left < 0) {
									left = 0
								} else if (left > ($mediuImgContainerWidth - $mask.width()) * 2) {
									left = (left > ($mediuImgContainerWidth - $mask.width()) * 2) * 2
								}

								if (top < 0) {
									top = 0
								} else if (top > ($mediuImgContainerHeight - $mask.height()) * 2) {
									top = (top > $mediuImgContainerHeight - $mask.height()) * 2
								}
								
								$largeImg.css({
									left: -left,
									top: -top
								});
								//显示大图
								$largeImg.show();
								//隐藏加载记录条
								$loading.hide();
							});
						});


					},
					function() {
						$mask.hide();
							$largeImgContainer.hide();
						
						

					});


			}

			function hoverMiniImg() {
				$('#icon_list>li').hover(function() {
					//鼠标移入

					$(this).css('color', 'red'); //添加样式
					//显示对应的中图
					var src = "../../img/a" + $(this).index() + ".png";
					$('#mediuImg').attr('src', src)

				}, function() {
					//鼠标移出
					$(this).css('color', 'black'); //添加样式

				});
			}

			function moveMiniImg() {
				var $aa = $('#product_intro>a');
				var $backward = $('.backward');
				var $forword = $('.forword');
				var $ul = $('#icon_list');
				var showPic = 4; //一次性显示4个
				var imgCount = $ul.children().length; //所有图片数量
				var distance = 100;

				//初始化更新
				if (imgCount > showPic) {
					$forword.addClass('color')
				}
				//向右的绑定监听
				var moveCount = 0; //点击向右+1 点击向左 -1 


				$backward.click(function() {
					//判断是否需要移动 不需要直接不行
					if (moveCount === imgCount - showPic) { //4个
						$backward.addClass('color');
						return
					}

					moveCount++;
					//更新右边移动的按钮
					$forword.removeClass('color');
					//更新右边的按钮
					if (moveCount === imgCount - showPic) {
						$backward.addClass('color');
					}
					//移动图片的距离

					$ul.css('left', -distance * moveCount);
				})

				//更新左边移动的按钮
				$forword.click(function() {

					//判断是否需要移动 不需要直接不行
					if (moveCount === 0) { //一上来不能移动 是0
						$forword.addClass('color');
						return
					}

					moveCount--;

					//更新右边移动的按钮
					$backward.removeClass('color');
					//更新左边的按钮
					if (moveCount === 0) {
						$forword.addClass('color');
					}
					//移动图片的距离

					$ul.css('left', -(moveCount) * distance);
				})

			}
		</script>
	</body>
</html>

¡Venceremo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现放大镜效果
Liang_nm的博客
01-18 1132
今天就给可爱的你们介绍jQuery实现图片局部放大镜效果，以下只是参考图啊（因为小姐姐喜欢lisa 哈哈哈） 放大镜效果的基本原理就是按照一个合适的比例去放大对应的相对的图片，同时放大镜部分和被放大图片的移动距离都要等比例的放大。 HTML代码如下： <!-- thumbnail 缩略图 original 原图 magnifier 放大镜 --> <div class="thumbnail">
jquery.imagezoom图片放大镜插件仿淘宝店铺商品放大镜展示
05-19
满足传统商品展示，比如淘宝、京东的商品图片展示功能。特别是淘宝的商品图片均是用户自己上传的，有宽有窄，为了美观又必须让图片完全居中显示。
jquery点击图片放大效果
weixin_52923266的博客
01-10 1464
点击图片放大效果无非就是创建一个大容器,点击小图片获取图片路径存放到大容器里.
JQuery实现放大镜
weixin_39724159的博客
02-13 492
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Docume...
jQuery放大镜实现
TERMINUSL的博客
08-02 529
jQuery实现放大镜效果
jquery 实现 图片放大
猎人在吃肉
03-17 3734
文章目录1、html、Jquery代码如下2、实始化加载的页面3、鼠标放到图片上时（ `hover` ）， 图片放大4、鼠标点击（ `click` ）后，图片放大：5、鼠标再次点击（ `click` ）后，放大的图片消失： 1、html、Jquery代码如下 <!DOCTYPE html> <html> <head> <title>enlarge-i...
京东商城详细页产品图片列表以及放大镜效果
08-03
在这个项目中，jQuery被用来处理图片列表的动态加载和放大镜效果的实现。 图片列表通常由多个小图组成，每个小图代表产品的一个不同角度或特性。在jQuery中，我们可以使用`$(document).ready()`函数确保DOM加载完成...
jquery手机屏幕放大镜效果.zip
05-21
在实现放大镜效果时，可能需要动态创建或修改DOM结构，比如创建遮罩层和放大镜元素，并根据用户交互更新它们的样式。 4. **响应式设计**：为了让放大镜效果在不同尺寸的手机屏幕上正常工作，需要考虑响应式设计。这...
jQuery类似放大镜缩略图切换.zip
07-11
3. **jQuery脚本**：核心在于使用jQuery编写JavaScript代码，这部分主要包括事件监听（如鼠标悬浮、点击按钮等）、图片加载与切换逻辑、放大镜效果的实现等。例如，使用`mouseenter`和`mousemove`事件处理放大镜效果...
jQuery商品图片放大镜特效特效代码
03-20
标题 "jQuery商品图片放大镜特效特效代码" 涉及的是网页开发中一种常见的用户体验增强技术，即使用jQuery库实现的商品图片放大镜效果。这种效果可以让用户在不离开页面的情况下，通过鼠标悬停或点击来查看商品图片的...
图片实现放大镜效果
11-08
首先，实现放大镜效果的核心是JavaScript和CSS。JavaScript通常用于处理用户的交互事件，如鼠标移动或点击，然后更新显示的放大图像。CSS则用来设置样式，包括放大镜的形状、位置和透明度等。 1. **HTML结构**： ...
jQuery实现放大镜功能
MyBlog
04-28 1936
该功能为三部分 1.小图部分 小图宽高为400px 2.放大镜 放大镜宽高为200px 3.大图部分 大图宽高为800px 大图小图都是同一张图片，通过css来设置宽高，通过鼠标在小图中的位置来控制大图的横向和纵向滚动条的位置来实现该功能 效果图： html代码 左边为小图部分，右边为大图部分 <div id="smallBox"> <img src="/img/1.png" alt=""> <div id="zoom"></div> </di
js实现大图显示
sdaddasd的博客
04-15 2114
[code="java"] New Document $(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 imgShow("#outerdiv", "#inn...
用jQuery 做出放大镜的效果
OrdnAry的博客
09-24 244
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
jquery实现点击图片放大功能
qq_42364200的博客
10-21 4171
1、准备一个大图的位置 设置样式属性 <div id="outerdiv" style="position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 2; width: 100%; height: 100%; display: none;"> <div id="innerdiv" style="position: absolute;"> <
jquery.imagezoom.js制作鼠标悬停图片放大镜特效、参数和最简教程
weixin_30881367的博客
10-14 1071
一、插件介绍 今天在用到放大镜效果的时候，突然发现网站里没有放大镜的插件。于是总结了一下，放到这里。为自己，也为他人提供方便。jquery.imagezoom.js这款插件用途很简单，就是鼠标移过去，将图片放大。 二、插件作者及下载 插件作者及官网：很抱歉没有在各方面的资料中找到这款插件的介绍。插件下载地址：http://www.ijquery.cn/js/imagezoom/jqu...
物联网工程_基于RFID的食堂食品安全监测系统设计.docx
最新发布
07-20
物联网工程_基于RFID的食堂食品安全监测系统设计

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值