原生js 图片查看器

已于 2022-06-09 09:36:22 修改
阅读量1.3k 收藏 3
点赞数
分类专栏： js 文章标签： 前端 javascript
于 2022-06-09 09:35:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asd53564967/article/details/125197182
版权

将以前用angular 写的 自定义指令 封装成 插件，无需引用jquery、angular。

下载下来即可查看效果。

github网址: GitHub - wzhGitH/imgView: js 图片查看器,H5图片预览(imgView)

百度云下载链接: 百度网盘 请输入提取码 密码: gidq

可实现放大、缩小、拖拽、旋转、上一张、下一张.

 样子是这样的

用原生js写的图片查看器， 可旋转、放大、上一张、下一张和拖拽.无需引用jquery.

参数值需要传入 图片数组、跟当前点击的图片即可

代码使用

var options = {
    dataList: dataList,   // 图片数组

    currentSrc: src       // 当前要显示的图片
}

// 使用
ImgView("imgView", options);

最主要的ImgView.js

(function(window, document) {
    var ImgView = function(targetDom, options) {
        // 判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了  
        if (!(this instanceof ImgView)) return new ImgView(targetDom, options);
        // 参数
        this.options = this.extend({
            dataList: [],
            currentSrc: ""
        }, options);
        // 获取dom
        this.targetDom = document.getElementById(targetDom);
        var html = "<div id='imgViewDiv' class='img-view-dialog'>" +
            "<div id='imgViewContent' class='img-view-content' draggable>" +
            "<img id='dialogImg' class='dialog-img' src=''></div>" +
            "<div class='dialog-tool'><i id='closeDialog' class='close-dialog'></i>" +
            "<i id='rotateDialog' class='rotate-dialog'></i><i id='prevDialog' class='previous-dialog'></i>" +
            "<i id='nextDialog' class='next-dialog'></i></div></div>";
        this.targetDom.innerHTML = html;
        this.btnClose = document.getElementById("closeDialog");
        this.btnRotate = document.getElementById("rotateDialog");
        this.btnPrev = document.getElementById("prevDialog");
        this.btnNext = document.getElementById("nextDialog");
        this.imgViewDiv = document.getElementById("imgViewDiv");
        this.imgViewContent = document.getElementById("imgViewContent");
        this.dialogImg = document.getElementById("dialogImg");
        this.num = 0;
        this.winWidth = 0;
        this.winHeight = 0;
        this.startX = 0, this.startY = 0, this.x = 0, this.y = 0;
        this.index = 1;
        this.event();
    }
    ImgView.prototype = {
        init: function() {
            this.event();
        },
        extend: function(obj, obj2) {
            for (var k in obj2) {
                obj[k] = obj2[k];
            }
            return obj;
        },
        event: function() {
            var _this = this;
            _this.thisSrc = _this.options.currentSrc;
            var dataList = _this.options.dataList;
            var index = dataList.indexOf(_this.thisSrc);
            _this.checkImg(_this.options.currentSrc, index);
            // 关闭
            _this.btnClose.addEventListener("click", function() {
                _this.close(_this);
            });
            // 旋转
            _this.btnRotate.addEventListener("click", function() {
                _this.rotate(_this);
            });
            // 上一张
            _this.btnPrev.addEventListener("click", function() {
                _this.prev(_this);
            });
            // 下一张
            _this.btnNext.addEventListener("click", function() {
                _this.next(_this);
            });
            // 鼠标按下
            _this.imgViewContent.addEventListener("mousedown", function(event) {
                _this.mousedown(_this, event);
            });
            // 滚轮事件 chrome & ie
            _this.imgViewContent.addEventListener("mousewheel", function(event) {
                _this.mousewheel(_this, event);
            });
            // 滚轮事件 firefox
            _this.imgViewContent.addEventListener("DOMMouseScroll", function(event) {
                _this.mousewheel(_this, event);
            });
        },
        // 滚轮事件
        mousewheel: function(_this, event) {
            event.preventDefault();
            var delta = (event.wheelDelta && (event.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
                (event.detail != 0 && (event.detail > 0 ? -1 : 1));
            if (delta > 0) {
                // 向上滚
                _this.index = _this.index + 0.1;
                if (_this.index > 4) {
                    _this.index = 4;
                }

            } else if (delta < 0) {
                // 向下滚
                _this.index = _this.index - 0.1;
                if (_this.index < 0.1) {
                    _this.index = 0.1;
                }
            }
            _this.imgViewContent.style.marginLeft = _this.imgMarginLeft - ((_this.index - 1) * _this.imgWidth) / 2 + "px";
            _this.imgViewContent.style.marginTop = _this.imgMarginTop - ((_this.index - 1) * _this.imgHeight) / 2 + "px";
            event.target.style.width = _this.imgWidth * _this.index + "px";
            event.target.style.height = _this.imgHeight * _this.index + "px";
        },
        // 鼠标按下事件(拖拽用)
        mousedown: function(_this, event) {
            event.preventDefault();
            var imgWidth = _this.imgWidth * _this.index;
            var imgHeight = _this.imgHeight * _this.index;
            var rotateNum = _this.num * 90;
            // 根据旋转的角度不同，坐标也不一样
            if (rotateNum % 90 == 0 && rotateNum % 180 != 0 && rotateNum % 270 != 0 && rotateNum % 360 != 0) {
                _this.startX = (imgWidth - imgHeight) / 2 + imgHeight - event.offsetY;
                _this.startY = event.offsetX - (imgWidth - imgHeight) / 2;
            } else if (rotateNum % 180 == 0 && rotateNum % 360 != 0) {
                _this.startX = imgWidth - event.offsetX;
                _this.startY = imgHeight - event.offsetY;
            } else if (rotateNum % 270 == 0 && rotateNum % 360 != 0) {
                _this.startX = (imgWidth - imgHeight) / 2 + event.offsetY;
                _this.startY = imgWidth - event.offsetX - (imgWidth - imgHeight) / 2;
            } else {
                _this.startX = event.offsetX;
                _this.startY = event.offsetY;
            }
            document.addEventListener('mousemove', mousemove);
            document.addEventListener('mouseup', mouseup);
            // 拖拽
            function mousemove(event) {
                _this.y = event.clientY - _this.startY - 10;
                _this.x = event.clientX - _this.startX - 10;
                _this.imgViewContent.style.marginTop = "" + _this.y + "px";
                _this.imgViewContent.style.marginLeft = "" + _this.x + "px";
                _this.imgViewContent.style.transition = "margin 0s";
            };
            // 鼠标放开
            function mouseup() {
                document.removeEventListener('mousemove', mousemove);
                document.removeEventListener('mouseup', mouseup);
                _this.imgViewContent.style.transition = "all 0.6s";
            }
        },
        // 关闭
        close: function(_this) {
            var imgViewDiv = document.getElementById("imgViewDiv");
            imgViewDiv.setAttribute("class", "img-view-dialog closing");
            setTimeout(function() {
                imgViewDiv.setAttribute("class", "img-view-dialog");
                imgViewDiv.style.display = "none";
                _this.num = 0;
            }, 400);
        },
        // 旋转
        rotate: function(_this) {
            _this.num++;
            _this.imgViewContent.style.transform = "rotate(" + _this.num * 90 + "deg) scale(1, 1)";
        },
        // 上一张
        prev: function(_this) {
            var dialogImg = document.getElementById("dialogImg");
            var thisSrc = dialogImg.attributes[2].value;
            if (thisSrc.indexOf("width:") != -1 || thisSrc.indexOf("height:") != -1) {
                thisSrc = dialogImg.attributes[3].value;
            }
            var dataList = _this.options.dataList;
            var index = dataList.indexOf(thisSrc);
            if (index > 0 && index <= (dataList.length - 1)) {
                index = index - 1;
                _this.checkImg(dataList[index], index);
            }

        },
        // 下一张
        next: function(_this) {
            var dialogImg = document.getElementById("dialogImg");
            var thisSrc = dialogImg.attributes[2].value;
            if (thisSrc.indexOf("width:") != -1 || thisSrc.indexOf("height:") != -1) {
                thisSrc = dialogImg.attributes[3].value;
            }
            var dataList = _this.options.dataList;
            var index = dataList.indexOf(thisSrc);
            if (index >= 0 && index < (dataList.length - 1)) {
                index = index + 1;
                _this.checkImg(dataList[index], index);
            }
        },
        // 点击图片
        checkImg: function(thisSrc, index) {
            var _this = this;
            _this.index = 1;
            _this.num = 0;
            _this.dialogImg.style.transform = "";
            _this.imgViewContent.setAttribute("class", "img-view-content");
            _this.getWindowWH();
            if (index == 0) {
                _this.btnPrev.style.display = "none";
            } else if (index == (dataList.length - 1)) {
                _this.btnNext.style.display = "none";
            } else {
                _this.btnPrev.style.display = "block";
                _this.btnNext.style.display = "block";
            }
            var image = new Image();
            image.src = thisSrc;
            var width = image.width;
            var height = image.height;
            var ww = 860;
            var wh = _this.winHeight - 20;
            if (width < ww && height < wh) {
                width = width;
                height = height;
            } else {
                var scale_x = width / ww;
                var scale_y = height / wh;
                if (scale_x > scale_y) {
                    var width = ww;
                    var height = parseInt(height / scale_x);
                } else {
                    var width = parseInt(width / scale_y);
                    var height = wh;
                }
            }
            _this.imgWidth = width;
            _this.imgHeight = height;
            var left = (_this.winWidth - width) / 2;
            var top = (_this.winHeight - height) / 2;
            _this.imgMarginLeft = left;
            _this.imgMarginTop = top;
            _this.imgViewContent.style.cssText = "margin-top:" + top + "px; margin-left:" + left + "px";
            _this.dialogImg.style.cssText = "width:" + width + "px; height:" + height + "px;";
            setTimeout(function() {
                _this.dialogImg.setAttribute("src", thisSrc);
                _this.imgViewContent.setAttribute("class", "img-view-content loadingImg");
            }, 600);
        },
        // 获取浏览器宽高
        getWindowWH: function() {
            var _this = this;
            if (window.innerWidth)
                _this.winWidth = window.innerWidth;
            else if ((document.body) && (document.body.clientWidth))
                _this.winWidth = document.body.clientWidth;
            // 获取窗口高度
            if (window.innerHeight)
                _this.winHeight = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
                _this.winHeight = document.body.clientHeight;
            // 通过深入 Document 内部对 body 进行检测，获取窗口大小
            if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
                _this.winHeight = document.documentElement.clientHeight;
                _this.winWidth = document.documentElement.clientWidth;
            }
        }
    }
    window.ImgView = ImgView;
}(window, document));

下载点击HTML即可查看.

neeol
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片预览（原生js实现）
孤独的冥王星
05-01 5174
实现图片预览功能，点击图片弹出大图预览框在屏幕中间显示，根据图片宽高自适应屏幕大小
js图片查看器插件用法示例
10-16
主要介绍了js图片查看器插件用法,结合实例形式分析了图片查看器插件viewer.js简单使用技巧,需要的朋友可以参考下
推荐开源项目：OpenSeadragon - 超级视觉体验的JavaScript图像查看器
最新发布
gitblog_00067的博客
05-10 358
推荐开源项目：OpenSeadragon - 超级视觉体验的JavaScript图像查看器 项目地址:https://gitcode.com/openseadragon/openseadragon 1、项目介绍 OpenSeadragon是一款强大且开源的Web图像查看器，基于纯JavaScript实现，可以提供无缝的缩放和导航功能，为用户提供如同海洋深度探索般的浏览体验。该项目致力于让展示高分辨...
纯JS图片查看器
张_优秀的博客
09-30 587
目前支持：放大、缩小（含滚轮）、旋转、还原。
js功能之使用viewer图片查看器实现图片浏览效果（亲测简单好用）
PowerYellow1的博客
01-08 3683
Viewer.js 是一款强大的图片查看器，像门户网站一般都会有各自的图片查看器，如果您正需要一款强大的图片查看器，也许 Viewer.js 是一个很好的选择。支持移动设备触摸事件支持响应式支持放大/缩小支持旋转（类似微博的图片旋转）支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式（可做屏保）支持缩略图支持标题显示支持多种自定义事件。
强大的图片预览组件Viewer.js
热门推荐
西洲
10-27 1万+
​Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能，同时，这款优秀的插件配置操作起来也非常的方便。Viewer.js分为2个版本，js版本和jquery版本，下载地址分别为纯JS版本：https://github.com/fengyuanchen/viewerjsjQuery 版本：GitHub - fengyuanchen/jquery-viewer: A jQuery plugin wrapper for Viewer.js.、网上看到有说jquer
Js fancybox做图片查看器
Tongyao
06-17 667
demo和js插件下载：https://www.lanzouq.com/iJ6gDxrujsh引入css 引入js html代码，下面是引用了三个，查看一下子可以查看三张 如果不想一下子查看三张，就把class名称改一下 js在初始化一个 其他参考：https://blog.csdn.net/asing1elife/article/details/83044760?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~d
强大的图片查看器插件Viewer.js原生版和jQuery版
11-10
Viewer.js是一款非常强大的图片弹窗查看器，点击图片弹窗查看，它支持全屏自动播放图片、放大缩小图片、鼠标拖拽图片、水平和垂直翻转图片、顺时针逆时针旋转图片等等，而且，它是响应式的布局，兼容手机pc各种尺寸...
js图片和视频查看器插件.zip
07-04
【JS图片和视频查看器插件】是一种基于JavaScript技术实现的多媒体查看工具，它能够集成在网页中，为用户提供方便的图片和视频浏览体验。这款插件不仅支持播放本地HTML5格式的视频，还能够无缝对接流行的在线视频...
纯js图片和视频查看器插件
12-11
**纯JS图片和视频查看器插件：BigPicture.js** 在网页设计中，提供一个优雅且功能丰富的媒体查看器是至关重要的，特别是对于那些需要展示大量图片和视频内容的网站。BigPicture.js就是这样一款专为JavaScript爱好者...
原生JS层叠图片轮播展示特效代码
03-20
首先，原生JS是指直接使用JavaScript语言本身，不依赖任何外部库如jQuery或Vue.js等框架来编写代码。这样做可以减少页面加载时间，提高性能，并使开发者有更大的控制权。 层叠图片轮播是一种常见的网页组件，它通过...
js图片查看器(可缩放、旋转、翻转)特效代码
03-20
js图片查看器。 鼠标拖动图片任意方向旋转，鼠标滚动滚轮缩放，任意角度翻转。 兼容各主流浏览器
强大的图片查看器插件Viewer.js原生版和jQuery版.zip
11-13
一款非常强大的图片弹窗查看器，点击图片弹窗查看，它支持全屏自动播放图片、放大缩小图片、鼠标拖拽图片、水平和垂直翻转图片、顺时针逆时针旋转图片等等，而且，它是响应式的布局，兼容手机pc各种尺寸的屏幕。...
js版图片查看器【完整版】
清砾的博客
08-01 1199
用到的知识点：setInterval定时器+Array数组==>[通过改变下标来改变图片] 难点：定时器加速问题 目标效果 HTML代码 <table class="table" > <tr> <th colspan="6"> <h1>JS版图片浏览器</h1> </th> </tr> <tr> <td colspan="6"> .
18. 【Android教程】图片控件 ImageView
这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~
04-11 1635
ImageView 和 TextView 一样是直接继承自 View 的基础控件，顾名思义，TextView 用来展示文本，那 ImageView 就是用来展示图片的了。因为 Android 碎片化严重，在 Android 中图片很容易使用但是却很难控制。不同的机型有不同的屏幕尺寸，导致对图片的适配要求很高。但是 Android 系统为我们提供了强大的图片控件，学好 ImageView 是做好 Android UI 适配的第一步。
原生js读取本地图片并预览
qq_38932474的博客
10-23 7736
<div class="input-inline goodsimg"> <input type="file" id="file_input" /> <img id="img" src="img/tp.png" alt=""> </div> .goodsimg { display: fl...
JavaScript实现图片在线预览(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-05 362
JavaScript实现图片在线预览(附完整源码)
原生js实现查看图片效果
qq_46582026的博客
03-19 1065
原生js实现查看图片功能
js 点击图片实现查看大图
草巾冒小子的博客
01-31 4976
js 点击图片实现查看大图
html多选框div,用原生JS实现简单的多选框功能
05-27
好的，我可以帮你解决这个问题。以下是一种实现方法： 首先，在 HTML 中创建多选框的 div 元素，例如： ```html <div id="checkboxes"> <input type="checkbox" value="option1" /> Option 1 <input type="checkbox" value="option2" /> Option 2 <input type="checkbox" value="option3" /> Option 3 </div> ``` 然后，使用 JavaScript 代码获取多选框 div 元素和其中的所有复选框元素，以及为每个复选框元素添加点击事件监听器，以便在用户单击复选框时更新选中状态。代码如下： ```javascript var checkboxes = document.getElementById("checkboxes"); var checkboxInputs = checkboxes.getElementsByTagName("input"); for (var i = 0; i < checkboxInputs.length; i++) { var checkboxInput = checkboxInputs[i]; checkboxInput.addEventListener("click", function() { updateCheckboxes(); }); } ``` 在事件监听器函数 updateCheckboxes() 中，可以获取选中的复选框值，并将它们存储在一个数组中。代码如下： ```javascript function updateCheckboxes() { var checkedValues = []; for (var i = 0; i < checkboxInputs.length; i++) { var checkboxInput = checkboxInputs[i]; if (checkboxInput.checked) { checkedValues.push(checkboxInput.value); } } console.log(checkedValues); } ``` 最后，可以在控制台中查看选中的复选框值，也可以根据需要将它们用于其他操作。 完整的 HTML 和 JavaScript 代码如下： ```html <div id="checkboxes"> <input type="checkbox" value="option1" /> Option 1 <input type="checkbox" value="option2" /> Option 2 <input type="checkbox" value="option3" /> Option 3 </div> <script> var checkboxes = document.getElementById("checkboxes"); var checkboxInputs = checkboxes.getElementsByTagName("input"); for (var i = 0; i < checkboxInputs.length; i++) { var checkboxInput = checkboxInputs[i]; checkboxInput.addEventListener("click", function() { updateCheckboxes(); }); } function updateCheckboxes() { var checkedValues = []; for (var i = 0; i < checkboxInputs.length; i++) { var checkboxInput = checkboxInputs[i]; if (checkboxInput.checked) { checkedValues.push(checkboxInput.value); } } console.log(checkedValues); } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值