用js实现图的缩放和拖动显示,

最新推荐文章于 2024-07-19 06:00:00 发布
最新推荐文章于 2024-07-19 06:00:00 发布
阅读量253 收藏
点赞数
文章标签： javascript xhtml ViewUI
本文介绍了一个使用HTML、CSS及JavaScript实现的简单图片拖动与缩放功能。通过鼠标操作可以改变背景图片的位置，点击加减按钮切换不同的图片。此示例展示了如何结合前端技术实现交互式的用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无标题文档</title>
<linkhref="main.css"rel="stylesheet"type="text/css"/>

</head>

<body>

<tablewidth="600"border="0">
<tr>
<tdwidth="500"height="500"><divid="pic1"onmousedown="down()"onmouseup="up()"></div></td>
<td><ahref="javascript:add()">+</a><br/>
<ahref="javascript:dec()">-</a></td>

</tr>
</table>

<scriptlanguage="JavaScript"type="text/javascript">...
picInfo=[
...{x:722,y:513,url:"img/001.jpg"},
...{x:1445,y:1027,url:"img/002.jpg"},
...{x:2889,y:2053,url:"img/003.jpg"}
];
downx=0;
downy=0;
currImg=0;

functionsetPic()...{
varpicObj=document.getElementById("pic1");
picObj.style.backgroundImage="url("+picInfo[currImg].url+")";
}
functionadd()...{
currImg=currImg+1;
if(currImg>=picInfo.length-1)
currImg=picInfo.length-1;
setPic();
}
functiondec()...{
currImg=currImg-1;
if(currImg<0)
currImg=0;
setPic();
}
functiondown()...{
varpicObj=document.getElementById("pic1");
downx=parseInt(event.clientX);
downy=parseInt(event.clientY);
picObj.style.cursor="hand";

}
functionup()...{
varcurrentX,currentY;
varpicObj=document.getElementById("pic1");
setPic();
//alert("x="+(downx-parseInt(event.clientX))+";y="+(downy-parseInt(event.clientY)));
if(picObj.style.backgroundPositionX=="")
currentX=0;
else...{
currentX=parseInt(picObj.style.backgroundPositionX);
}
if(picObj.style.backgroundPositionY=="")
currentY=0;
else...{
currentY=parseInt(picObj.style.backgroundPositionY);
}

varmoveX=currentX+parseInt(event.clientX)-downx;
varmoveY=currentY+parseInt(event.clientY)-downy;

if(moveX>0)...{
moveX=0;
}else
...{
if(500-moveX>picInfo[currImg].x)
moveX=-(picInfo[currImg].x-500);
}

if(moveY>0)...{
moveY=0;
}else
...{
if(500-moveY>picInfo[currImg].y)
moveY=-(picInfo[currImg].y-500);
}

picObj.style.backgroundPositionY=moveY+"px";
picObj.style.backgroundPositionX=moveX+"px";
picObj.style.cursor="auto";

}
setPic();
</script>
</body>


</html>
iteye_7987
关注
javascript图片预览（滚动放大缩小和拖动查看）
11-24
打开html可直接查看例子，例子中图片url写死的，是一个网络图片，如果该图片不见了可直接更改那个地址。 完全是自己写的滚动和拖动行为
js仿百度地图放大缩小拖拽查看效果
02-25
js实现地图效果，实现地图拖拽、大小缩放，地图放大，地图缩小，地图拖动
javascript实现对图片的随意拖拽,放大缩小
xiangqin的博客
06-26 1864
【JS】基于javascript实现对图片的随意拖拽,放大缩小 最近写项目的过程中需要对图片进行一个操作，点击之后弹出图片，在可定div范围内对图片进行任意拖拽位置和鼠标滚动时对其放大缩小，双击图片恢复原图！对于我们这样后台程序员而言，这种前台效果实现起来确实有点勉强，在经过半个小时挣扎之后，终于完成效果，发表上来，以供广大后台程序员借鉴吧！ 第一步： body之内的代码如下： 1 2 ...
js实现图片预览【放大、缩小、拖动】
yao_1996的博客
11-06 2852
<style> #div{width:400px;height:400px;overflow:hidden;position:relative;border:1px solid #000;} #div img{position:absolute;height:100%;width:auto;cursor:move;} </style> &l...
JS拖拽图片
SEKIRO_DJ的博客
11-07 306
分享一个简单的图片拖拽效果 HTML结构 用一个div包裹图片 <div class="box"> <img src="./images/img.jpg" alt=""> </div> CSS样式 盒子加上溢出隐藏，这里做的效果是Y轴滚动，所以让width:100%高度自适应 <style> .box { position: relative;
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
12-10
在JavaScript编程中，创建一个可缩放、拖动、关闭和最小化的浮动窗口是一项常见的需求，这在网页设计和富客户端应用中尤为实用。本文将详细介绍如何使用纯JS实现这样的功能，无需依赖任何第三方库。 首先，我们来看...
Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题）
06-14
Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题），大屏项目显示云南省3D的地图，可拖拽缩放、地图打点、点击图标弹框等等功能。 ## 使用 - 启动调试服务: `npm start` - 构建 dist: `npm run ...
d3.js实现图形缩放平移
10-15
d3.js 是一个非常强大的数据可视化JavaScript库，它可以帮助开发者在网页上创建动态、交互式的图表和信息图。在数据可视化过程中，图形的缩放和平移是一种非常常见的用户交互方式，可以增强视觉效果和用户体验。本文...
JavaScript实现图片缩放与拖动功能详解
使用JavaScript（js）可以实现纯前端的图片缩放与拖动操作，无需依赖任何第三方库。下面将详细阐述如何使用原生JavaScript实现这一功能，并提供相关知识点。 ### 知识点一：HTML元素与属性 要实现图片的缩放与拖动...
js实现图片缩放与拖动
11-02
在JavaScript中实现图片的缩放和拖动功能是一项常见的需求，尤其在开发交互式Web应用时。本篇文章将深入探讨如何使用JavaScript实现这一功能，并提供一个基础实例。 首先，我们需要理解图片缩放和拖动的基本原理。...
实现类似地图标签的拖拽缩放
10-14
实现类似地图标签的拖拽缩放
JavaScript 缩略图自动滚动并显示对应大图
06-26
JavaScript 缩略图自动滚动并显示对应大图! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.youkuaiyun.com/
js实现缩略图自动滚动并显示对应大图
06-02
js实现缩略图自动滚动并显示对应大图js实现缩略图自动滚动并显示对应大图
js百度地图放大缩小拖拽查看效果
10-27
js百度地图放大缩小拖拽查看效果 js百度地图放大缩小拖拽查看效果
前端JS特效第45集：js实现图片放大和拖拽特效
最新发布
2401_85903333的博客
07-19 496
js实现图片放大和拖拽特效
原生js实现图片预览,旋转,放大,缩小,拖拽
转身浮生
03-24 1382
##CSS代码(有几个功能背景图，在最下面)
原始js实现图片的放大缩小，拖拽，截取指定部分
WuQingLaoXingXing的博客
07-26 1375
定义结构 <div class="img-intercep-wrap"> <div class="pic_wrapper"> <img src="./1.jpg"> <canvas class="pic_show"></canvas> </div> <button class="translate">截取</butt..
原生JS实现图片拖拽移动与缩放
weixin_33720452的博客
07-02 350
看一下最终效果,图片可以拖动,可以缩放 把代码贴出来,可以直接粘贴使用,大致的思想就是鼠标按下的时候获取当时的鼠标位置,要减去left和top值,移动的时候获取位置减去初始的值就得到移动的时候的left和top值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值