图片的定位、滚动、缩放

最新推荐文章于 2024-07-16 16:33:50 发布
最新推荐文章于 2024-07-16 16:33:50 发布
阅读量918 收藏 3
点赞数 1
分类专栏： html 文章标签： html js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/G925010178/article/details/116713819
版权
需求描述：最近开发过程中，客户需要在手机端显示图片，并可以放大缩小，随意查看。如果有报警信息，需要在图纸上具体点位标出报警。

一、功能分析：

1、实现图片放大缩小、滑动效果
2、实现图片以某一点居中定位
3、实现在图片某个点定位另一张图片
  • 最后附有整体代码

在这里插入图片描述

二、开发过程

1、素材

需要展示的图纸一张，大小3037 * 2304
在这里插入图片描述
报警图片一张，大小48 * 48
在这里插入图片描述

2、开始实现图片的滑动效果
  • 创建一个可以上下滑动的父元素【.big-box】，超出隐藏 overflow: scroll。
  • 里面放入背景图为图纸【.box-image】和火焰【.box-fire】的两个div。
实现 图纸【.box-image】和 火焰【.box-fire】可以在 父元素【.big-box】中上下左右滑动的效果。
<div class="big-box">
    <div class="box-image" data-level="10"></div>
    <div class="box-fire"></div>
</div>
<button class="big">放大</button>
<button class="small">缩小</button>
<script>
		.big-box{
            height: 300px;
            overflow: scroll;
            position: relative;
        }
        .box-image{
            background: url('../public/img/show.png');
            background-repeat:no-repeat;
            background-size: cover;
            width: 3037px;
            height: 2304px;
        }
        .box-fire{
            background: url('../public/img/fire.png');
            background-repeat:no-repeat;
            background-size: cover;
            width: 48px;
            height: 48px;
            position: absolute;
            opacity: 0.8;
        }
</script>
3、定位图纸中的报警点和火焰图片

  • 获取图片、火焰、父级元素的基础宽高

  • 当前报警点位为 【05-030】，在图纸中的位置为 距离顶部50%，距离左侧30%，计算图片的偏移距离。在这里插入图片描述

  • 此时报警点【 05-030】位于图片左上角，如果想要报警点位于中心，则分别减去父级的高宽的一半
    在这里插入图片描述

  • 将 火焰【.box-fire】基于 父元素【.big-box】绝对定位，距离顶部 【图片的高度* 0.5】,距离左边【图片的宽度* 0.3】。
    在这里插入图片描述

  • 此时图片位于红色方框内，为了美观效果，需要移动到黄色方框内，需要适量减去图片本身的高度和宽度。

在这里插入图片描述

<script>
	//获取图片、火焰和父级元素的基础宽高
	var imageBaseWidth=$('.box-image').width();
    var imageBaseHeight=$('.box-image').height();
    var fireBaseWidth=$('.box-fire').width();
    var fireBaseHeight=$('.box-fire').height();
    var boxWidth=$('.big-box').width();
    var boxHeight=$('.big-box').height();
	//加载图片
	showImage(imageBaseWidth,imageBaseHeight);
	//图片
	function showImage(imageWidth,imageHeight){
		//当缩小后图片的宽度小于父级的宽度的时候，
	    $('.big-box').scrollLeft(imageWidth*0.3-boxWidth/2)
	    $('.big-box').scrollTop(imageHeight*0.5-boxHeight/2)
	    fire(imageWidth*0.3,imageHeight*0.5);
	}
	//火焰
	function fire(imageWidth,imageHeight){
		$('.box-fire').css('top',imageHeight-fireBaseHeight/1.2)
		$('.box-fire').css('left',imageWidth-fireBaseWidth/2)
	}
</script>
4、实现图片的缩放功能
  • 定义当前缩放等级【level】为10，点击放大按钮和缩小按钮，【level】分别自增和自减，注意【level】最小为1.
  • 图片【.box-image】的高宽和 火焰【.box-fire】的高宽分别 乘以 缩放等级【level】*0.1
 <script>
	//放大
	$('.big').click(function(){
	    var level=$('.box-image').data('level')+1;
	    change(level)
	})
	//缩小
	$('.small').click(function(){
	    var level=$('.box-image').data('level')-1;
	    change(level==0?1:level)
	})
 	//图片
	$('.box-image').width(imageBaseWidth*level*0.1);
	$('.box-image').height(imageBaseHeight*level*0.1);
	//火焰
	$('.box-fire').width(fireBaseWidth*level*0.1);
	$('.box-fire').height(fireBaseHeight*level*0.1);
 </script>
整体代码
  • 当缩放过程中，当图片的长度和高度小于父级元素的长度和高度时，此时不能滑动，计算定位时，也不用减去父级的长宽的一半。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="format-detection" content="telephone=yes"/>
    <meta name="msapplication-tap-highlight" content="no" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
        .big-box{
            height: 300px;
            overflow: scroll;
            position: relative;
        }
        .box-image{
            background: url('../public/img/show.png');
            background-repeat:no-repeat;
            background-size: cover;
            width: 3037px;
            height: 2304px;
        }
        .box-fire{
            background: url('../public/img/fire.png');
            background-repeat:no-repeat;
            background-size: cover;
            width: 48px;
            height: 48px;
            position: absolute;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div class="big-box">
        <div class="box-image" data-level="10"></div>
        <div class="box-fire"></div>
    </div>
    <button class="big">放大</button>
    <button class="small">缩小</button>
<script>
    $(function(){
        var imageBaseWidth=$('.box-image').width();
        var imageBaseHeight=$('.box-image').height();
        var fireBaseWidth=$('.box-fire').width();
        var fireBaseHeight=$('.box-fire').height();
        var boxWidth=$('.big-box').width();
        var boxHeight=$('.big-box').height();

        showImage(imageBaseWidth,imageBaseHeight);

        //放大
        $('.big').click(function(){
            var level=$('.box-image').data('level')+1;
            change(level)
        })
        //缩小
        $('.small').click(function(){
            var level=$('.box-image').data('level')-1;
            change(level==0?1:level)
        })
        //加载图片
        function showImage(imageWidth,imageHeight,level=10){
            $('.big-box').scrollLeft((imageWidth<boxWidth)?imageWidth*0.3:imageWidth*0.3-boxWidth/2)
            $('.big-box').scrollTop((imageHeight<boxHeight)?imageHeight*0.5:imageHeight*0.5-boxHeight/2)
            fire(imageWidth*0.3,imageHeight*0.5,level);
        }
        //改变图片
        function change(level){
            var imageWidth=imageBaseWidth*level*0.1
            var imageHeight=imageBaseHeight*level*0.1
            $('.box-image').data('level',level);
            $('.box-image').width(imageWidth);
            $('.box-image').height(imageHeight);
            showImage(imageWidth,imageHeight,level);
        }
        //火焰
        function fire(imageWidth,imageHeight,level){
            $('.box-fire').width(fireBaseWidth*level*0.1);
            $('.box-fire').height(fireBaseHeight*level*0.1);
            $('.box-fire').css('top',imageHeight-fireBaseHeight*level*0.1/1.2)
            $('.box-fire').css('left',imageWidth-fireBaseWidth*level*0.1/2)
        }

    })
</script>
</body>
</html>
G925010178
关注
专栏目录
JS前端HTML5图片预览手势缩放
07-21
极简调用： 多图预览 function photoPreview(items) { var items = [{ src: "1.jpg", w: 1920, h: 1080, title: "第一张图片的提示" },{ src: "2.jpg", w: 1024, h: 768, title: "第二张图片的提示" },{ src: "3.jpg", w: 800, h: 600, title: "第三张图片的提示" }]; openPhotoSwipe(items); }
图片列表滚动条定位及图片高亮
weixin_43772661的博客
09-17 199
笔者在此作为记录 1、定位： document.getElementById("").scrollIntoView(); 2、图片高亮： :class="{active : imgActive == index}"
定位缩放方法简述
WhyLearnCode的博客
07-27 232
地图定位缩放的方法
ppt讲解中的过渡_PPT教程：缩放定位功能详解
weixin_33355290的博客
01-09 1181
编按： 如果有个PPT要你边演讲、边实操讲解某些技巧，也就是演示模式和普通视图之间来回切换，你是否会为了寻找某一章节而出现慌乱呢？这就是今天要讲的PPT缩放定位功能，让你的演讲内容随心所欲，点到哪，跳到哪，一起来看看吧！大家好，我是随心，好久不见！上个月，我受邀前往我们当地的邮政公司，给大家分享了一些制作PPT的技巧。为了这次讲课，我做了一个60多页的PPT。这个PPT不仅是我...
html图片全图放大效果,图片缩小和图片定位_html/css_WEB-ITnose
weixin_32487755的博客
06-03 364
想做一个缩略图 但全图缩图又太小了就缩到一个合适的大小 用overflow剪出显示大小的但图片的定位是从左边开始的 图片中的一些信息也剪掉了请前辈指点.post{float: left;width: 210px;height: 150px;overflow:hidden;background-color: #fff;margin: 10px 0px 0px 10px;}.post img{max...
图片手指缩放css，js
03-18
3. **防止默认行为**: 当处理触摸事件时，需要调用`event.preventDefault()`来阻止浏览器默认的行为，比如页面滚动，确保只有图片缩放操作生效。 4. **坐标转换**: 为了准确地定位缩放中心，需要将触点相对于元素的...
jq带滚动条图片滚动特效代码
03-20
6. **图片缩放**：点击图片时，可以实现图片的放大和缩小，这通常通过改变图片的 CSS `transform` 属性中的 `scale` 值来实现。同时，可能需要考虑图片居中对齐和防止图片超出容器边界的问题。 7. **自适应设计**：...
js实现的鼠标滚动控制图片在原始位置等比例缩放特效源码.zip
11-19
在JavaScript（简称JS）编程中，实现鼠标滚动控制图片在原始位置等比例缩放的特效是一种常见的交互设计，它可以为用户带来更为丰富的视觉体验。这个压缩包中的源码提供了这样的功能，下面我们将深入探讨实现这一特效...
图片滚动效果，鼠标移至上面图片放大并跟随移动
11-17
4. 图片容器布局：为了保证图片在放大后不会超出容器，通常需要设置一个相对定位的图片容器，图片则使用绝对定位。这样可以通过调整图片的大小和位置，使其在放大后依然在容器内显示。 5. 性能优化：考虑到大量图片...
JS滚轮控制图片缩放大小和拖动的实例代码
10-17
在JavaScript中，实现图片的滚轮缩放和拖动功能是一项常见的交互设计需求。通过给定的代码实例，我们可以了解到如何使用JavaScript事件处理和CSS样式调整来实现这一功能。以下是对这段代码的详细解释： 首先，HTML...
图片放大效果之相对定位
qq_43687594的博客
02-24 518
1、图片右边和下边均有6px的空隙 2、在图片和li之间，都有边框和不同的填充色 （一个元素只能有一个边框和背景色，所以可以分别给li和img添加边框和背景色） 3、滑过图片的时候，图片有放大效果 （如果只写滑过效果，部分图片会被掩盖在其他图片的下面，所以需要使用相对定位将图片的层次上提一层） （相对定位的偏移量可以为负值） *{margin: 0;padding: 0;} li{list-style: none;} a{text-decoration: n.
图片拖拽与定位
TinyStar
08-26 218
前端js方式实现图片上传前缩放大小
Scofield_liu的专栏
05-21 1049
前端js方式实现图片上传前缩放大小
【前端】原生实现图片的放大与缩放
最新发布
karshey的博客
07-16 817
，否则会不断地触发监听事件，表示为：当手指捏合操作图片的放大和缩小时，图片的变化显得很卡，且控制台输出一堆信息（中：我们点击图片会显示一个蒙版，图片显示在蒙版上，允许放大和缩小。因此，点击图片时才渲染这个蒙版，点击图片，出现一个蒙版和图片，双指捏合可以使图片放大或缩小。使用前端框架是svelte，但是不影响，功能都是JS实现。中定义此事件的监听，此时可能不存在。，要先把之前定义的监听移除（至于蒙版和图片：点击图片时。等，简单逻辑不赘述。
实现左上角的固定视口但是网格以图片中心放大缩小
a1309602336的博客
05-08 261
仅仅修改了showbk（） 函数部分，增加bkv4 直接采样，然后粘贴到左上角，实现多余部分裁剪，形成视口内放大缩小。
vue移动端实现，DOM元素拖拽放大缩小，改变位置
qq_46634851的博客
08-19 2550
vue 移动端实现移动，并放大缩小功能
css——图片缩放，拉伸，变形的解决办法
杜永康的博客
03-09 9862
是一种 CSS 样式属性，用于设置对象（如图片或视频）在容器中的位置。通过设置属性，可以改变对象在容器中的位置，从而实现布局上的调整。该属性的值可以是一个具体的像素值，也可以是相对于容器的百分比值。例如：设置可以将对象在容器中居中显示。该属性通常与object-fit属性一起使用，用于控制对象在容器中的大小和位置。
前端入门经常被忽略的难题，html图片如何等比例缩放
huz1lu的博客
03-05 8738
本篇文章主要的介绍了关于html img标签图片的等比例缩放的介绍和使用实例，最后还有关于html img标签图片等比例缩放的总结，接下来让我们一起来看这篇文章吧 首先我们先看看html img图片如何等比例缩放： 在DIV CSS布局中对于图片列表或图片排版时，图片不是固定宽度高度大小，但图片占位是固定宽度高度，这个时候如果使用CSS固定死图片大小（宽度 高度），这个时候如果图片相对于这个位置不是等比例大小，那么这张图片就会变形，让图片变得不清晰，这个时候想让图片不变形又按比例缩放，如何解决？CSS图
vue2 手机端照片在指定框内可放大缩小并支持移动照片
fishermanMr
06-18 474
为了使图片在缩放时不超出容器，你可能还需要实现额外的逻辑来限制图片的移动范围，确保它始终在指定框内。scaleImage 方法用于处理图片的缩放，通过计算两指之间的距离变化来动态调整缩放比例。moveImage 方法用于图片的移动，通过计算触摸点的位移来更新图片的位置。接下来，创建一个Vue组件来实现图片的移动和缩放功能。首先，你需要安装Hammer.js库来处理触摸事件。上述代码中，图片的移动和缩放是基于触摸事件处理的。请根据实际需求调整样式和逻辑细节。
手机双指缩放图片功能的CSS与JavaScript实现
2. **CSS样式：** 设置容器的相对定位，使得图片可以绝对定位在其内部，并且设置图片的最大宽度和高度。 ```css #imageContainer { position: relative; overflow: hidden; /* 防止图片缩放时溢出容器 */ } #...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值