原生，实现鼠标点击按钮打开，关闭，图片点击放大效果

最新推荐文章于 2024-05-23 10:56:36 发布
最新推荐文章于 2024-05-23 10:56:36 发布
阅读量315 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44394740/article/details/117285894
版权

图片点击放大 效果 借鉴了下面这个
这里这里，点击图片放大功能
本案例需要使用jQuery
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>易租康适老化改造</title>
	</head>
	<body>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body{
				background-color: #F4F4F4;
			}
		
		
			
			
			.box .header_topBox {
				width: 100%;
				height: 100%;
			}
		
			.header_topBox .imageBanner {
				width: 100%;
			}
		
			.box .contentBox {
				width: 95%;
				margin: 15px auto;
				padding-bottom: 100px;
		
			}
		
			.contentBox .titleBox {
				background-color: #fff !important;
				border-radius: 5px;
				padding: 10px;
				font-size: 24px;
			}
		
			/* 基础资料 */
			.contentBox .dataBox {
				margin-top: 20px;
			}
		
			.dataBox .dataBox_titles {
				background-color: #2A9BFC;
				border-radius: 2px;
				height: 60px;
				font-size: 24px;
				color: #fff;
				padding: 10px 25px;
			
			}
			.dataBox .videBox{
				margin-top: 10px;
				width: 100%;
			}
			.dataBox .videBox .videos{
				width: 100%;
			}
			.dataBox .dataBox_informationBox {
				background-color: #fff !important;
		
			}
		
			.dataBox_informationBox .dataBox_information {
				font-size: 24px;
				padding: 15px 10px;
				border-bottom: 1px solid #F4F4F4;
			}
		
			.dataBox_informationBox .dataBox_information:last-child {
				border-bottom: none;
			}
			/* 改造成果 */
			.dataBox .dataBox_titlesBox{
				height: 60px;
				line-height: 60px;
				padding: 8px 25px;
				background-color: #2A9BFC;
				border-radius: 2px;
				font-size: 24px;
				color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.dataBox_btn {
				margin-right: 30px;
			}
			.dataBox_titlesBox .dataBox_btn .rightBtn,.bottomBtn{
				width: 20px;
				height: 20px;
			}
			.dataBox .Transformation_Box{
				background-color: #fff;
			}
			.Transformation_Box .Transformation{
				width: 97%;
				margin: 0 auto;
				padding: 15px 0 15px 0;
			}
			.Transformation_Box .Transformation .Transformation_Title{
				background-color: #2A9BFC;
				border-radius: 2px;
				font-size: 24px;
				color: #fff;
				padding: 10px 25px;
			}
			.Transformation_Box .Transformation .Transformatio_Content{
				display: flex;
				justify-content: space-around;
				font-size: 24px;
				color: #3DA5FD;
				padding: 15px 0;
				/* border-top: 1px solid #F4F4F4; */
				text-align: center;
			}
			.Transformation_Box .Transformation .Transformatio_Content .Transformatio_Content_left,.Transformatio_Content_right{
				width: 45%;
			}
			.Transformation_Box .Transformation .Transformatio_Content .Transformatio_Content_left img,.Transformatio_Content_right img{
				margin-top: 20px;
				width: 100%;
				height: auto;
			}
			@media screen and (max-width: 375px) {
			    .contentBox .titleBox {
			    	font-size: 20px;
			    }
					.dataBox .dataBox_titles {
						background-color: #2A9BFC;
						border-radius: 2px;
						height: 50px;
						font-size: 20px;
						color: #fff;
						padding: 10px 25px;
					}
					.dataBox_informationBox .dataBox_information {
						font-size: 20px;
						padding: 15px 10px;
						border-bottom: 1px solid #F4F4F4;
					}
					/* 改造成果 */
					.dataBox .dataBox_titlesBox{
						font-size: 20px;
					}
					.Transformation_Box .Transformation .Transformation_Title{
						font-size: 20px;
					}
					.Transformation_Box .Transformation .Transformatio_Content{				
						font-size: 20px;
					}
			}
	
		</style>
		
		<div class="box">
			<div class="header_topBox">
				<img src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg" class="imageBanner">
			</div>
			<div class="contentBox">
				<div class="titleBox">
					<div class="title">
							我就是标题
							我就是标题
							我就是标题
							我就是标题
							我就是标题
							我就是标题
							我就是标题我就是标题我就是标题
					</div>
				</div>
				<!-- 基础资料 -->
				<div class="dataBox">
					<div class="dataBox_titles">
						基础资料
					</div>
					<div class="dataBox_informationBox">
						<div class="dataBox_information">
							姓名 : 瑶瑶
						</div>
						<div class="dataBox_information">
							性别 : 女
						</div>
						<div class="dataBox_information">
							居住地址 : 爪哇果
						</div>
					</div>
				</div>
				<!-- 改造成果 -->
				<div class="dataBox">
					<div class="dataBox_titlesBox">
						<div class="dataBox_title">
							改造成果
						</div>
						<div class="dataBox_btn">
							<img src="img/bottom.png" class="bottomBtn" onclick="showReform()">
							<img src="img/right.png" class="rightBtn" onclick="hideReform()">
						</div>
					</div>
					<div class="Transformation_Box">
						<div class="Transformation">
							<div class="Transformation_Title">
								改造前后对比
							</div>
							<div class="Transformatio_Content">
								<div class="Transformatio_Content_left">
									改造前
									<div class="imgBox">
											<img src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg" width="100" class="pic" >
											
									</div>
								</div>
								<div class="Transformatio_Content_right">
									改造后
									<div class="imgBox">
											<img src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg" width="100" class="pic" >
										
									</div>
								</div>
								
							</div>
						</div>
					</div>
				</div>
				<!-- 改造前视频 -->
				<div class="dataBox">
					<div class="dataBox_titles">
						改造前视频
					</div>
					<div class="videBox">
						<video src="movie.ogg" controls="controls" class="videos">
						您的浏览器不支持 video 标签。
						</video>
					</div>
				
				</div>
				<!-- 改造后视频 -->
				<div class="dataBox">
					<div class="dataBox_titles">
						改造后视频
					</div>
					<div class="videBox">
						<video src="movie.ogg" controls="controls" class="videos">
						您的浏览器不支持 video 标签。
						</video>
					</div>
				
				</div>
			</div>
			<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;">
			    <img id="bigimg" style="border:5px solid #fff;" src="" />
			  </div>
			
			</body>
		</div>
		<script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(".rightBtn,.Transformation_Box").css({"display":"none"})
			function showReform(){
				$(".bottomBtn").css({"display":"none"})
				$(".rightBtn,.Transformation_Box").css({"display":"block"})
			}
			function hideReform(){
				$(".bottomBtn").css({"display":"block"})
				$(".rightBtn,.Transformation_Box").css({"display":"none"})
			}
			
			$(function(){
			   $(".pic").click(function(){ 
			     var _this = $(this);//将当前的pimg元素作为_this传入函数 
			     imgShow("#outerdiv", "#innerdiv", "#bigimg", _this); 
			   }); 
			 }); 
			 function imgShow(outerdiv, innerdiv, bigimg, _this){ 
			   var src = _this.attr("src");//获取当前点击的pimg元素中的src属性 
			   $(bigimg).attr("src", src);//设置#bigimg元素的src属性 
			     /*获取当前点击图片的真实大小，并显示弹出层及大图*/ 
			   $("<img/>").attr("src", src).load(function(){ 
			     var windowW = $(window).width();//获取当前窗口宽度 
			     var windowH = $(window).height();//获取当前窗口高度 
			     var realWidth = this.width;//获取图片真实宽度 
			     var realHeight = this.height;//获取图片真实高度 
			     var imgWidth, imgHeight; 
			     var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放 
			     if(realHeight>windowH*scale) {//判断图片高度 
			       imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放 
			       imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度 
			       if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度 
			         imgWidth = windowW*scale;//再对宽度进行缩放 
			       } 
			     } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度 
			       imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放 
			             imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度 
			     } else {//如果图片真实高度和宽度都符合要求，高宽不变 
			       imgWidth = realWidth; 
			       imgHeight = realHeight; 
			     } 
			         $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放 
			     var w = (windowW-imgWidth)/2;//计算图片与窗口左边距 
			     var h = (windowH-imgHeight)/2;//计算图片与窗口上边距 
			     $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性 
			     $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg 
			   }); 
			   $(outerdiv).click(function(){//再次点击淡出消失弹出层 
			     $(this).fadeOut("fast"); 
			   }); 
			 }
		</script>
	</body>
</html>

效果图：
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

小慕呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生js鼠标拖动鼠标控制图片放大缩小效果
11-24
在JavaScript（JS）编程中，实现“原生js鼠标拖动鼠标控制图片放大缩小效果”涉及到几个关键的技术点。这个功能通常应用于交互式界面或图像查看器，让用户可以通过鼠标操作来观察图片细节。以下是实现这一功能的具体...
js实现图片放大和拖拽特效代码分享
10-23
主要介绍了js实现图片放大和拖拽特效，除了点击放大和缩小按钮来控制图片的放大缩小，还可以使用鼠标的滚轮控制图片的缩放，推荐给大家，有需要的小伙伴可以参考下。
Vue ElementUI表格内实现图片点击放大效果的方式
m0_58565372的博客
06-16 7822
方法一：使用el-popover弹出框 trigger属性用于设置何时触发Popover(弹出框)属性值有：hover、click、focus 和 manual效果图： 方法二：使用v-viewer插件1.安装依赖，在项目文件里进行安装安装命令：npm install v-viewer --save安装依赖界面： 或者 效果图：方法三：使用vue-directive-image-previewer组件1.安装依赖，在项目文件里进行安装安装命令：npm install vue-directive
jquery点击图片放大功能
weixin_43258364的博客
10-19 1640
jquery点击图片放大功能js代码css代码 js代码 $('#enlarge').click(function () { //获取图片路径 var imgsrc = $("#enlarge").attr("src"); var opacityBottom = '<div class="opacityBottom" style = "display:none"><img class="bigImg" s
如何使用CSS和JS实现鼠标移动到图片上的时候实现图片的放大和缩小效果。
最新发布
emmmaha的博客
05-23 564
替换为您实际的图片路径，以及根据需要调整放大倍数和过渡效果的时间。这样，当鼠标移动到图片上方时，图片就会放大显示。您可以使用CSS和JavaScript结合实现当鼠标移动到图片上方时，让图片放大的效果。的样式，确保图片放大后不会溢出容器。然后对图片设置了过渡效果。将图片放大1.2倍（实现缩小可将数值定在(0,1)内）。在上面的示例中，我们首先创建了一个包含图片的。，当鼠标悬停在容器上时（即。
点击图片实现图片放大
weixin_45932157的博客
02-19 5996
点击图片实现图片放大的效果： 我们经常会看到当我们点击图片的时候，图片可以放大，放到原来本身的样子，看起来特别舒服。 今天我参考了网上一些经验实现了图片放大功能。 首先我们看代码： <html> <head> <style> .over { position: fixed; left: 0...
[CSS] CSS实现鼠标移入图片放大效果
iChangebaobao的博客
05-18 1万+
CSS实现鼠标移入图片放大效果 一般在官网比较常见这种动效，当鼠标移入图片时可以看到视觉放大的效果，这里用到一个css属性 object-fit: cover; object-fit 属性 object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。 .activity-content-img{ width: 100%; height: 100%;
CSS - 鼠标移入图片放大及缓慢过渡效果（仅 “内部“ 放大，不改变容器大小）鼠标移入图片变成发大镜效果
王佳斌
08-04 8076
css - 鼠标移入图片放大及缓慢过渡效果（仅 "内部" 放大，不改变容器大小）鼠标移入图片变成发大镜效果，CSS实现鼠标移入图片放大效果，css鼠标移入图片变成发大镜效果，css鼠标移入盒子，里面的图片放大，不改变盒子大小，使用CSS3实现鼠标移到图片上图片放大，html鼠标悬停图片放大或缩小，html鼠标经过图片放大，CSS实现鼠标移入时图片的放大效果及缓慢过渡效果，css鼠标移入图片变成发大镜效果。css鼠标进入图片放大......
js点击小图弹出大图查看代码
04-09
- **关闭大图**：我们可以添加一个关闭按钮或者再次点击小图来关闭大图。 - **预加载大图**：为了避免用户点击后出现加载延迟，可以预先加载大图，或者在用户悬停在小图上时开始加载。 - **响应式设计**：确保在...
js实现图片放大和拖拽特效.zip
07-11
代码简介：js实现图片放大和拖拽特效是一款非常实用的js特效，实现了图片的放大和拖拽功能，没用用到jquery插件，是用原生javascript实现的，除了点击放大和缩小按钮来控制图片的放大缩小，还可以使用鼠标的滚轮控制...
js实现图片放大和拖拽特效特效代码
03-20
js实现图片放大和拖拽特效是一款非常实用的js特效，实现了图片的放大和拖拽功能，没用用到jquery插件，是用原生javascript实现的，除了点击放大和缩小按钮来控制图片的放大缩小，还可以使用鼠标的滚轮控制图片的缩放...
通过按钮实现 图片 放大 缩小
10-14
通过点击按钮 放大 缩小 实现图片的放大和缩小
点击按钮放大图片.zip
04-28
课业资源：安卓中ImageView，的使用：点击按钮，放大图片，安卓中基础控件的使用。
Java Applet 显示图片 并点击按钮 图片放大 缩小显示
09-07
这是小程序 本地盘符有相应的图片文件 运行加载 就可以看见效果 图片通过点击按钮 可以达到缩小或放大的作用
点击按钮放大图片效果
u014414110的博客
02-21 1197
点击按钮放大图片效果 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!--&lt;a href='img
点击按钮，图片放大
m0_43416568的博客
04-28 290
private ImageView img; private Button shift; //事件 shift.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { /...
js实现图片在一个div中点击按钮放大缩小效果
直到世界的尽头
08-27 1万+
图片放大，缩小也是前端中经常遇到得问题，以下就根据这个需求，做如下示范： <!DOCTYPE html> <html> <head> <title>图片放大</title> </head> <style type="text/css"> .main_div{ margin: 20px auto; tex...
javaScript实现图片的放大和缩小
热门推荐
bwf_erg的博客
04-27 1万+
在这里我们带领大家来使用javaScript实现图片的放大和缩小。实现的效果图如下 点击放大按钮，图片会放大，当放大到一定程度的时候，图片不能再放大，会弹出一个提示框，不能再放大了，点击缩小按钮，图片会缩小，当缩小到一定程度的时候，图片不能再缩小，会弹出一个提示框，不能再缩小了。 下面我们先来实现界面的布局。 点击按钮图片进行缩放，可以看出需要将图片和按钮放置在一个div里面。 布
CSS 实现鼠标移动到图片上图片变大，不改变盒子大小
Shivy_的博客
03-02 4387
CSS 实现鼠标移动到图片上图片变大，不改变盒子大小
原生js实现点击按钮复制功能
06-08
原生 JavaScript 实现点击按钮复制功能也是可以的，可以使用 `document.execCommand('copy')` 方法来实现。以下是一个简单的实现示例： HTML 代码： ```html 要复制的内容">复制 ``` JavaScript 代码： ```...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值