前端JS特效第45集：js实现图片放大和拖拽特效

于 2024-07-19 06:00:00 发布
阅读量166 收藏
点赞数 6
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85903333/article/details/139999847
版权

js实现图片放大和拖拽特效，先来看看效果：

部分核心的代码如下(全部代码在文章末尾)：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js实现图片放大和拖拽特效</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/drag_map.js"></script>
    <style type="text/css">
        body{font-size: 12px;font-family: "Verdana" , "Arial" , "Helvetica" , "sans-serif";} td{font-size: 12px; line-height: 150%;} TD{font-size: 12px; color: #000000;} A{font-size: 12px; color: #000000;} #Layer1{z-index: 100; position: absolute; top: 150px;} #Layer2{z-index: 1; position: absolute;}
    </style>
    <script type="text/JavaScript">
        function MM_reloadPage(init) {
            if (init == true) with (navigator) {
                if ((appName == "Netscape") && (parseInt(appVersion) == 4)) {
                    document.MM_pgW = innerWidth; document.MM_pgH = innerHeight; onresize = MM_reloadPage;
                }
            }
            else if (innerWidth != document.MM_pgW || innerHeight != document.MM_pgH) location.reload();
        }
        MM_reloadPage(true);
    </script>
</head>
<body onLoad="" onmouseup="document.selection.empty()" oncontextmenu="return false"
    onselectstart="return false" ondragstart="return false" onbeforecopy="return false"
    style="overflow-y: hidden; overflow-x: hidden" oncopy="document.selection.empty()"
    leftmargin="0" topmargin="0" onselect="document.selection.empty()" marginheight="0"
    marginwidth="0">
	
    <div id="Layer1">
        <table cellspacing="2" cellpadding="0" border="0">
            <tbody>
                <tr>
                    <td>&nbsp;
                        
                    </td>
                    <td>
                        <img title="向上" style="cursor: hand" onClick="clickMove('down')" height="20" src="images/up.gif"
                            width="20">
                    </td>
                    <td>&nbsp;
                        
                    </td>
                </tr>
                <tr>
                    <td>
                        <img title="向左" style="cursor: hand" onClick="clickMove('right')" height="20" src="images/left.gif"
                            width="20">
                    </td>
                    <td>
                        <img title="还原" style="cursor: hand" onClick="realsize();" height="20" src="images/zoom.gif"
                            width="20">
                    </td>
                    <td>
                        <img title="向右" style="cursor: hand" onClick="clickMove('left')" height="20" src="images/right.gif"
                            width="20">
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;
                        
                    </td>
                    <td>
                        <img title="向下" style="cursor: hand" onClick="clickMove('up')" height="20" src="images/down.gif"
                            width="20">
                    </td>
                    <td>&nbsp;
                        
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;
                        
                    </td>
                    <td>
                        <img title="放大" style="cursor: hand" onClick="bigit();" height="20" src="images/zoom_in.gif"
                            width="20">
                    </td>
                    <td>&nbsp;
                        
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;
                        
                    </td>
                    <td>
                        <img title="缩小" style="cursor: hand" onClick="smallit();" height="20" src="images/zoom_out.gif"
                            width="20">
                    </td>
                    <td>&nbsp;
                        
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <p>
        <br>
    </p>
    <div id="hiddenPic" style="z-index: 1; left: 0px; visibility: hidden; width: 0px;
        position: absolute; top: 150px; height: 0px">
        <img src="http://ww2.sinaimg.cn/large/adde8400gw1eeazlmtqa8j20qd0mdadm.jpg" border="0" name="images2">
    </div>
    <div class="dragAble" id="block1" onMouseOver="dragObj=block1; drag=1;" style="z-index: 10;
        left: 0px; width: 0px; position: absolute; top: 150px; height: 0px" onMouseOut=""
        drag="0">
        <img onmousewheel="return onWheelZoom(this)" style="zoom: 0.7" src="images/adde8400gw1eeazlmtqa8j20qd0mdadm.jpg"
            border="0" name="images1">
    </div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>

全部代码：js实现图片放大和拖拽特效

强迫领导写Bug
关注
  • 6
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端期末大作业：基于HTML+CSS+JavaScript制作我的音乐网站（带设计报告）
qq_3200628753的博客
08-07 2240
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结......
web前端期末大作业：基于HTML+CSS+JS外卖服务平台10页 带购物车 (web课程设计与实现)
HTML网页设计
08-11 790
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站......
javascript二——PC端网页特效
0 error(s), 0 warning(s)
04-04 2361
文章目录元素偏移量offset系列概述offset和style区别获取鼠标位置案例拖拽模态框案例放大镜案例元素可视区client系列立即执行函数淘宝flexibleJS源码分析元素滚动scroll系列固定侧边栏三大系列总结主要用法：mouseenter和mouseover的区别动画函数封装动画实现原理封装缓动效果原理动画函数多个目标值之间移动动画函数添加回调函数动画函数封装到单独JS文件里常见网页特效案例轮播图节流阀带有动画的返回顶部筋斗云 元素偏移量offset系列 概述 offset,偏移量，使用off
JS进阶网页特效（pink老师笔记）
shenruiaaa的博客
03-06 1256
元素偏移量offset系列 offset概述 offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）.大小等 获取元素距离带有定位父类的位置 获取元素自身的大小（宽，高） 返回的数值都不带单位 <style> *{ margin: 0; padding: 0; } .father{ posit
JavaScript—— PC 端网页特效
weixin_61920612的博客
04-03 1579
JavaScript—— PC 端网页特效
JS拖拽的n种例子
Benxiaohai_311的博客
03-26 2301
一、第一种 <!DOCTYPE html> <!--create by ydj on 2018-08-12--> <html> <head> <meta charset="UTF-8"> <title>拖动的水平条</title> <style> *{ margin: 0; padding: 0; } .scroll{ width: 400px;
2024年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新
热门推荐
jyl919221lc的博客
05-11 1万+
最新前端面试题汇总大全(含答案超详细)--持续更新
JavaScript学习7：PC端网页特效（offset、client、scroll、动画
最新发布
2401_84434442的博客
07-12 270
在这里插入图片描述](https://img-blog.csdnimg.cn/20210302135125222.png?立即执行函数 ：不需要调用，立马执行，最大的作用就是独立创建了一个作用域，避免了命名冲突问题。element.offsetParent：返回带有定位的父亲，否则返回body。(function(){})() ：第二个括号可以看作调用函数。element.parentNode：返回最近一级的父亲。另一种写法：(function(){}())公式：（目标值 - 现在的位置） / 10。
15前端学习之WebAPI(五):网页特效的三大系列(offset、client、scroll)，动画函数封装，轮播图
浅弋、璃鱼的博客
04-28 418
文章目录一、网页特效:1. 元素偏移量 offset 系列:1.1 offset 概述:1.2 offset 与 style 区别1.3 案例：获取鼠标在盒子内的坐标:1.4 案例：模态框拖拽: 一、网页特效: 1. 元素偏移量 offset 系列: 1.1 offset 概述: offset: 偏移量.使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等; 获得元素距离带有...
js实现图片放大和拖拽特效代码分享
10-23
主要介绍了js实现图片放大和拖拽特效，除了点击放大和缩小按钮来控制图片的放大缩小，还可以使用鼠标的滚轮控制图片的缩放，推荐给大家，有需要的小伙伴可以参考下。
js实现图片放大和拖拽特效.zip
07-11
代码简介：js实现图片放大和拖拽特效是一款非常实用的js特效，实现了图片的放大和拖拽功能，没用用到jquery插件，是用原生javascript实现的，除了点击放大和缩小按钮来控制图片的放大缩小，还可以使用鼠标的滚轮控制...
js实现图片放大和拖拽特效.rar
06-23
js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效....
js实现图片放大和拖拽特效特效代码
03-20
js实现图片放大和拖拽特效是一款非常实用的js特效，实现了图片的放大和拖拽功能，没用用到jquery插件，是用原生javascript实现的，除了点击放大和缩小按钮来控制图片的放大缩小，还可以使用鼠标的滚轮控制图片的缩放...
js实现图片放大并跟随鼠标移动特效
10-17
大图元素（id为"bigPic"）的宽度设置为600px，以实现放大效果。注意，这个`<div>`的初始样式是`display:none`，表示在默认情况下它是隐藏的，只有当鼠标移动到小图上时才会显示。 在实际使用中，你可以将这段代码...
Js可拖拽放大的层拖动特效实现方法
10-24
主要介绍了Js可拖拽放大的层拖动特效实现方法,涉及javascript操作DOM元素及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
1500个前端开发常用JavaScript特效
04-24
9. **Vue.js/React/Angular框架**：这些现代前端框架允许开发者用组件化的方式构建大型应用，它们提供了虚拟DOM、状态管理、生命周期钩子等特性，简化了JavaScript特效的实现。 10. **响应式设计**：随着移动设备的...
手机端点击图片放大特效PhotoSwipe.js插件实现
06-12
PhotoSwipe.js是一款强大的JavaScript插件，专门用于实现手机端图片点击放大效果，并且提供了全屏浏览、双击放大等多种功能。通过这款插件，开发者可以轻松地为自己的网站或应用添加专业级的图片展示效果。 ...
基于JavaScript实现图片截图可放大缩小拖动特效源码.zip
11-09
在前端开发中，实现图片的截图、放大、缩小和拖动功能是一项常见的需求，尤其是在交互式应用和网页设计中。这个"基于JavaScript实现图片截图可放大缩小拖动特效源码.zip"提供了一种解决方案，我们可以从以下几个方面...
html鼠标拖动图片放大,JavaScript实现图片的放大缩小及拖拽功能示例
06-10
好的，这个问题我可以回答。以下是一个简单的HTML和JavaScript实现图片放大缩小和拖拽的示例： ```html <!DOCTYPE html> <html> <head> <title>Image Zoom and Drag</title> <style> #image-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid black; overflow: hidden; cursor: move; } #image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <div id="image-container"> <img src="https://picsum.photos/id/237/300/300" id="image"> </div> <script> var image = document.getElementById("image"); var imageContainer = document.getElementById("image-container"); var isDragging = false; var lastX, lastY; imageContainer.addEventListener("mousedown", function(e) { isDragging = true; lastX = e.clientX; lastY = e.clientY; }); imageContainer.addEventListener("mouseup", function(e) { isDragging = false; }); imageContainer.addEventListener("mousemove", function(e) { if (isDragging) { var deltaX = e.clientX - lastX; var deltaY = e.clientY - lastY; var newTop = image.offsetTop + deltaY; var newLeft = image.offsetLeft + deltaX; image.style.top = newTop + "px"; image.style.left = newLeft + "px"; lastX = e.clientX; lastY = e.clientY; } }); imageContainer.addEventListener("wheel", function(e) { e.preventDefault(); var scale = e.deltaY > 0 ? 0.9 : 1.1; var newWidth = image.clientWidth * scale; var newHeight = image.clientHeight * scale; image.style.width = newWidth + "px"; image.style.height = newHeight + "px"; }); </script> </body> </html> ``` 这个示例中，我们首先创建了一个容器 `image-container`，然后在容器中放置了一个图片 `image`。我们使用 CSS 来将容器居中并添加了一些样式，例如设置容器为相对定位、边框、隐藏溢出部分和鼠标指针为移动。 然后我们使用 JavaScript 来添加拖拽和缩放的功能。我们使用了三个变量 `isDragging`、`lastX` 和 `lastY` 来跟踪拖拽状态和鼠标位置。当用户按下鼠标按钮时，我们设置 `isDragging` 为 `true` 并记录下当前鼠标位置。当用户释放鼠标按钮时，我们设置 `isDragging` 为 `false`。当用户移动鼠标时，我们检查 `isDragging` 是否为 `true`，如果是，就计算鼠标移动的距离，并将图片的位置相应地调整。这样就实现了拖拽的功能。 最后，我们添加了一个滚轮事件监听器来实现缩放功能。当用户滚动鼠标滚轮时，我们阻止默认行为，然后根据滚轮的方向计算缩放比例，并将图片的宽度和高度相应地调整。 希望这个示例能够帮助你实现所需的功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值