[JS插件] PhotoSwipe 图片浏览插件使用方法

article/2025/9/23 5:36:46

这里写图片描述

一、介绍

PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。

官方网站：http://photoswipe.com/
源码下载：https://github.com/dimsemenov/photoswipe
国内CDN：http://www.bootcdn.cn/photoswipe/

二、构建网页，引入相关文件

1、新建html页面，如果是移动端看的话，需要在页面头部插入视口说明：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

2、引入 photoswipe.css、default-skin.css 文件，引入 photoswipe.js、photoswipe-ui-default.js 文件。

<link href="http://cdn.bootcss.com/photoswipe/4.1.1/photoswipe.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/photoswipe/4.1.1/default-skin/default-skin.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/photoswipe/4.1.1/photoswipe.js"></script>
<script src="http://cdn.bootcss.com/photoswipe/4.1.1/photoswipe-ui-default.js"></script>

三、写出你的图片相册结构，并配上样式

比如你有2张图片，则结构如下：

<div id="demo-test-gallery" class="demo-gallery"><a href="https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg" data-size="1600x1600" data-med="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_b.jpg" data-med-size="1024x1024"><img src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg" alt="" /></a><a href="https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg" data-size="1600x1068" data-med="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg" data-med-size="1024x1024"><img src="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg" alt="" /></a>
</div>

注意：一定要有“data-med”这个属性，否则在移动端显示不出来；一定要用一个容器把图片包含起来。

四、必要的启动代码

首先必须要写出来相册层必要的结构代码，因为这一部分作者没有集成到他的JS里面，所以要自己加上去，代码如下：

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"><!-- Background of PhotoSwipe. It's a separate element as animating opacity is faster than rgba(). --><div class="pswp__bg"></div><!-- Slides wrapper with overflow:hidden. --><div class="pswp__scroll-wrap"><!-- Container that holds slides. PhotoSwipe keeps only 3 of them in the DOM to save memory.Don't modify these 3 pswp__item elements, data is added later on. --><div class="pswp__container"><div class="pswp__item"></div><div class="pswp__item"></div><div class="pswp__item"></div></div><!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --><div class="pswp__ui pswp__ui--hidden"><div class="pswp__top-bar"><!--  Controls are self-explanatory. Order can be changed. --><div class="pswp__counter"></div><button class="pswp__button pswp__button--close" title="Close (Esc)"></button><button class="pswp__button pswp__button--share" title="Share"></button><button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button><button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button><!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR --><!-- element will get class pswp__preloader--active when preloader is running --><div class="pswp__preloader"><div class="pswp__preloader__icn"><div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div></div></div></div></div><div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"><div class="pswp__share-tooltip"></div> </div><button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button><button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button><div class="pswp__caption"><div class="pswp__caption__center"></div></div></div></div></div>

然后加上必要的js启动代码：

<script type="text/javascript">(function() {var initPhotoSwipeFromDOM = function(gallerySelector) {var parseThumbnailElements = function(el) {var thumbElements = el.childNodes,numNodes = thumbElements.length,items = [],el,childElements,thumbnailEl,size,item;for(var i = 0; i < numNodes; i++) {el = thumbElements[i];// include only element nodesif(el.nodeType !== 1) {continue;}childElements = el.children;size = el.getAttribute('data-size').split('x');// create slide objectitem = {src: el.getAttribute('href'),w: parseInt(size[0], 10),h: parseInt(size[1], 10),author: el.getAttribute('data-author')};item.el = el; // save link to element for getThumbBoundsFnif(childElements.length > 0) {item.msrc = childElements[0].getAttribute('src'); // thumbnail urlif(childElements.length > 1) {item.title = childElements[1].innerHTML; // caption (contents of figure)}}var mediumSrc = el.getAttribute('data-med');if(mediumSrc) {size = el.getAttribute('data-med-size').split('x');// "medium-sized" imageitem.m = {src: mediumSrc,w: parseInt(size[0], 10),h: parseInt(size[1], 10)};}// original imageitem.o = {src: item.src,w: item.w,h: item.h};items.push(item);}return items;};// find nearest parent elementvar closest = function closest(el, fn) {return el && ( fn(el) ? el : closest(el.parentNode, fn) );};var onThumbnailsClick = function(e) {e = e || window.event;e.preventDefault ? e.preventDefault() : e.returnValue = false;var eTarget = e.target || e.srcElement;var clickedListItem = closest(eTarget, function(el) {return el.tagName === 'A';});if(!clickedListItem) {return;}var clickedGallery = clickedListItem.parentNode;var childNodes = clickedListItem.parentNode.childNodes,numChildNodes = childNodes.length,nodeIndex = 0,index;for (var i = 0; i < numChildNodes; i++) {if(childNodes[i].nodeType !== 1) {continue;}if(childNodes[i] === clickedListItem) {index = nodeIndex;break;}nodeIndex++;}if(index >= 0) {openPhotoSwipe( index, clickedGallery );}return false;};var photoswipeParseHash = function() {var hash = window.location.hash.substring(1),params = {};if(hash.length < 5) { // pid=1return params;}var vars = hash.split('&');for (var i = 0; i < vars.length; i++) {if(!vars[i]) {continue;}var pair = vars[i].split('=');if(pair.length < 2) {continue;}params[pair[0]] = pair[1];}if(params.gid) {params.gid = parseInt(params.gid, 10);}return params;};var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {var pswpElement = document.querySelectorAll('.pswp')[0],gallery,options,items;items = parseThumbnailElements(galleryElement);// define options (if needed)options = {galleryUID: galleryElement.getAttribute('data-pswp-uid'),getThumbBoundsFn: function(index) {// See Options->getThumbBoundsFn section of docs for more infovar thumbnail = items[index].el.children[0],pageYScroll = window.pageYOffset || document.documentElement.scrollTop,rect = thumbnail.getBoundingClientRect();return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};},addCaptionHTMLFn: function(item, captionEl, isFake) {if(!item.title) {captionEl.children[0].innerText = '';return false;}captionEl.children[0].innerHTML = item.title +  '<br/><small>Photo: ' + item.author + '</small>';return true;}};// options for control baroptions.shareEl = false;options.fullscreenEl = false;if(fromURL) {if(options.galleryPIDs) {// parse real index when custom PIDs are used// http://photoswipe.com/documentation/faq.html#custom-pid-in-urlfor(var j = 0; j < items.length; j++) {if(items[j].pid == index) {options.index = j;break;}}} else {options.index = parseInt(index, 10) - 1;}} else {options.index = parseInt(index, 10);}// exit if index not foundif( isNaN(options.index) ) {return;}// Pass data to PhotoSwipe and initialize itgallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);// see: http://photoswipe.com/documentation/responsive-images.htmlvar realViewportWidth,useLargeImages = false,firstResize = true,imageSrcWillChange;gallery.listen('beforeResize', function() {var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;dpiRatio = Math.min(dpiRatio, 2.5);realViewportWidth = gallery.viewportSize.x * dpiRatio;if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {if(!useLargeImages) {useLargeImages = true;imageSrcWillChange = true;}} else {if(useLargeImages) {useLargeImages = false;imageSrcWillChange = true;}}if(imageSrcWillChange && !firstResize) {gallery.invalidateCurrItems();}if(firstResize) {firstResize = false;}imageSrcWillChange = false;});gallery.listen('gettingData', function(index, item) {if( useLargeImages ) {item.src = item.o.src;item.w = item.o.w;item.h = item.o.h;} else {item.src = item.m.src;item.w = item.m.w;item.h = item.m.h;}});gallery.init();};// select all gallery elementsvar galleryElements = document.querySelectorAll( gallerySelector );for(var i = 0, l = galleryElements.length; i < l; i++) {galleryElements[i].setAttribute('data-pswp-uid', i+1);galleryElements[i].onclick = onThumbnailsClick;}// Parse URL and open gallery if it contains #&pid=3&gid=1var hashData = photoswipeParseHash();if(hashData.pid && hashData.gid) {openPhotoSwipe( hashData.pid,  galleryElements[ hashData.gid - 1 ], true, true );}};initPhotoSwipeFromDOM('.demo-gallery');})();</script>

五、可以外链的js文件

如果你不想在页面里写入过多的代码，可以把上面的div和js都写到一个文件里，然后引入进来也可以，请把以下代码保存为.js文件吧：

document.writeln("<!-- Root element of PhotoSwipe. Must have class pswp. -->");
document.writeln("<div class=\"pswp\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">");
document.writeln("");
document.writeln("    <!-- Background of PhotoSwipe.");
document.writeln("         It\'s a separate element as animating opacity is faster than rgba(). -->");
document.writeln("    <div class=\"pswp__bg\"><\/div>");
document.writeln("");
document.writeln("    <!-- Slides wrapper with overflow:hidden. -->");
document.writeln("    <div class=\"pswp__scroll-wrap\">");
document.writeln("");
document.writeln("        <!-- Container that holds slides.");
document.writeln("            PhotoSwipe keeps only 3 of them in the DOM to save memory.");
document.writeln("            Don\'t modify these 3 pswp__item elements, data is added later on. -->");
document.writeln("        <div class=\"pswp__container\">");
document.writeln("            <div class=\"pswp__item\"><\/div>");
document.writeln("            <div class=\"pswp__item\"><\/div>");
document.writeln("            <div class=\"pswp__item\"><\/div>");
document.writeln("        <\/div>");
document.writeln("");
document.writeln("        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->");
document.writeln("        <div class=\"pswp__ui pswp__ui--hidden\">");
document.writeln("");
document.writeln("            <div class=\"pswp__top-bar\">");
document.writeln("");
document.writeln("                <!--  Controls are self-explanatory. Order can be changed. -->");
document.writeln("");
document.writeln("                <div class=\"pswp__counter\"><\/div>");
document.writeln("");
document.writeln("                <button class=\"pswp__button pswp__button--close\" title=\"Close (Esc)\"><\/button>");
document.writeln("");
document.writeln("                <button class=\"pswp__button pswp__button--share\" title=\"Share\"><\/button>");
document.writeln("");
document.writeln("                <button class=\"pswp__button pswp__button--fs\" title=\"Toggle fullscreen\"><\/button>");
document.writeln("");
document.writeln("                <button class=\"pswp__button pswp__button--zoom\" title=\"Zoom in\/out\"><\/button>");
document.writeln("");
document.writeln("                <!-- Preloader demo http:\/\/codepen.io\/dimsemenov\/pen\/yyBWoR -->");
document.writeln("                <!-- element will get class pswp__preloader--active when preloader is running -->");
document.writeln("                <div class=\"pswp__preloader\">");
document.writeln("                    <div class=\"pswp__preloader__icn\">");
document.writeln("                        <div class=\"pswp__preloader__cut\">");
document.writeln("                            <div class=\"pswp__preloader__donut\"><\/div>");
document.writeln("                        <\/div>");
document.writeln("                    <\/div>");
document.writeln("                <\/div>");
document.writeln("            <\/div>");
document.writeln("");
document.writeln("            <div class=\"pswp__share-modal pswp__share-modal--hidden pswp__single-tap\">");
document.writeln("                <div class=\"pswp__share-tooltip\"><\/div>");
document.writeln("            <\/div>");
document.writeln("");
document.writeln("            <button class=\"pswp__button pswp__button--arrow--left\" title=\"Previous (arrow left)\">");
document.writeln("            <\/button>");
document.writeln("");
document.writeln("            <button class=\"pswp__button pswp__button--arrow--right\" title=\"Next (arrow right)\">");
document.writeln("            <\/button>");
document.writeln("");
document.writeln("            <div class=\"pswp__caption\">");
document.writeln("                <div class=\"pswp__caption__center\"><\/div>");
document.writeln("            <\/div>");
document.writeln("");
document.writeln("        <\/div>");
document.writeln("");
document.writeln("    <\/div>");
document.writeln("");
document.writeln("<\/div>");(function() {var initPhotoSwipeFromDOM = function(gallerySelector) {var parseThumbnailElements = function(el) {var thumbElements = el.childNodes,numNodes = thumbElements.length,items = [],el,childElements,thumbnailEl,size,item;for(var i = 0; i < numNodes; i++) {el = thumbElements[i];// include only element nodesif(el.nodeType !== 1) {continue;}childElements = el.children;size = el.getAttribute('data-size').split('x');// create slide objectitem = {src: el.getAttribute('href'),w: parseInt(size[0], 10),h: parseInt(size[1], 10),author: el.getAttribute('data-author')};item.el = el; // save link to element for getThumbBoundsFnif(childElements.length > 0) {item.msrc = childElements[0].getAttribute('src'); // thumbnail urlif(childElements.length > 1) {item.title = childElements[1].innerHTML; // caption (contents of figure)}}var mediumSrc = el.getAttribute('data-med');if(mediumSrc) {size = el.getAttribute('data-med-size').split('x');// "medium-sized" imageitem.m = {src: mediumSrc,w: parseInt(size[0], 10),h: parseInt(size[1], 10)};}// original imageitem.o = {src: item.src,w: item.w,h: item.h};items.push(item);}return items;};// find nearest parent elementvar closest = function closest(el, fn) {return el && ( fn(el) ? el : closest(el.parentNode, fn) );};var onThumbnailsClick = function(e) {e = e || window.event;e.preventDefault ? e.preventDefault() : e.returnValue = false;var eTarget = e.target || e.srcElement;var clickedListItem = closest(eTarget, function(el) {return el.tagName === 'A';});if(!clickedListItem) {return;}var clickedGallery = clickedListItem.parentNode;var childNodes = clickedListItem.parentNode.childNodes,numChildNodes = childNodes.length,nodeIndex = 0,index;for (var i = 0; i < numChildNodes; i++) {if(childNodes[i].nodeType !== 1) {continue;}if(childNodes[i] === clickedListItem) {index = nodeIndex;break;}nodeIndex++;}if(index >= 0) {openPhotoSwipe( index, clickedGallery );}return false;};var photoswipeParseHash = function() {var hash = window.location.hash.substring(1),params = {};if(hash.length < 5) { // pid=1return params;}var vars = hash.split('&');for (var i = 0; i < vars.length; i++) {if(!vars[i]) {continue;}var pair = vars[i].split('=');if(pair.length < 2) {continue;}params[pair[0]] = pair[1];}if(params.gid) {params.gid = parseInt(params.gid, 10);}return params;};var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {var pswpElement = document.querySelectorAll('.pswp')[0],gallery,options,items;items = parseThumbnailElements(galleryElement);// define options (if needed)options = {galleryUID: galleryElement.getAttribute('data-pswp-uid'),getThumbBoundsFn: function(index) {// See Options->getThumbBoundsFn section of docs for more infovar thumbnail = items[index].el.children[0],pageYScroll = window.pageYOffset || document.documentElement.scrollTop,rect = thumbnail.getBoundingClientRect();return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};},addCaptionHTMLFn: function(item, captionEl, isFake) {if(!item.title) {captionEl.children[0].innerText = '';return false;}captionEl.children[0].innerHTML = item.title +  '<br/><small>Photo: ' + item.author + '</small>';return true;}};// options for control baroptions.shareEl = false;options.fullscreenEl = false;if(fromURL) {if(options.galleryPIDs) {// parse real index when custom PIDs are used// http://photoswipe.com/documentation/faq.html#custom-pid-in-urlfor(var j = 0; j < items.length; j++) {if(items[j].pid == index) {options.index = j;break;}}} else {options.index = parseInt(index, 10) - 1;}} else {options.index = parseInt(index, 10);}// exit if index not foundif( isNaN(options.index) ) {return;}// Pass data to PhotoSwipe and initialize itgallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);// see: http://photoswipe.com/documentation/responsive-images.htmlvar realViewportWidth,useLargeImages = false,firstResize = true,imageSrcWillChange;gallery.listen('beforeResize', function() {var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;dpiRatio = Math.min(dpiRatio, 2.5);realViewportWidth = gallery.viewportSize.x * dpiRatio;if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {if(!useLargeImages) {useLargeImages = true;imageSrcWillChange = true;}} else {if(useLargeImages) {useLargeImages = false;imageSrcWillChange = true;}}if(imageSrcWillChange && !firstResize) {gallery.invalidateCurrItems();}if(firstResize) {firstResize = false;}imageSrcWillChange = false;});gallery.listen('gettingData', function(index, item) {if( useLargeImages ) {item.src = item.o.src;item.w = item.o.w;item.h = item.o.h;} else {item.src = item.m.src;item.w = item.m.w;item.h = item.m.h;}});gallery.init();};// select all gallery elementsvar galleryElements = document.querySelectorAll( gallerySelector );for(var i = 0, l = galleryElements.length; i < l; i++) {galleryElements[i].setAttribute('data-pswp-uid', i+1);galleryElements[i].onclick = onThumbnailsClick;}// Parse URL and open gallery if it contains #&pid=3&gid=1var hashData = photoswipeParseHash();if(hashData.pid && hashData.gid) {openPhotoSwipe( hashData.pid,  galleryElements[ hashData.gid - 1 ], true, true );}};initPhotoSwipeFromDOM('.demo-gallery');})();

http://chatgpt.dhexx.cn/article/xrxyHKeh.shtml

相关文章

原生js 图片查看器

原生js 图片查看器

将以前用angular 写的 自定义指令 封装成 插件&#xff0c;无需引用jquery、angular。 下载下来即可查看效果。 github网址: GitHub - wzhGitH/imgView: js 图片查看器,H5图片预览(imgView) 百度云下载链接: 百度网盘 请输入提取码 密码: gidq 可实现放大、缩小、拖拽、旋转…
阅读更多...
vue-quill-editor拖拽或粘贴的图片上传到服务器回显插入图片后删除生成的Base64图片

vue-quill-editor拖拽或粘贴的图片上传到服务器回显插入图片后删除生成的Base64图片

问题描述&#xff1a;拖拽或粘贴图片上传到服务器后返回url插入富文本编辑器后&#xff0c;quill默认生成的base64图片链接也同时出现在富文本编辑器中&#xff0c;等于是有两张相同的图片&#xff0c;一张是我们服务器图片&#xff0c;一张是base64格式图片&#xff01;&#…
阅读更多...
Unity3D在UI中加入Image图片

Unity3D在UI中加入Image图片

在将图片拖入到Assets后发现根本不能将图片拖入到UI中&#xff1a; 新建Image后在Source Image中也不能找到图片&#xff1a; 那是因为你没把图片设置为Sprite&#xff0c;图片只是Texture而已&#xff0c;只能作为贴图使用。 可以将图片设置为Sprite: 这样一切就正常了&#…
阅读更多...
纯JS图片查看器

纯JS图片查看器

目前支持&#xff1a;放大、缩小&#xff08;含滚轮&#xff09;、旋转、还原 /*** 说明信息* date 2022/10/13 19:46:44* 初始化图片查看器* date 2022/09/21 14:40:06* id 唯一标识&#xff0c;指定id区域内的图片* params 扩展参数&#xff0c;设置图片大小&#xff0c;目前…
阅读更多...
vue-quill-editor上传图片

vue-quill-editor上传图片

问题&#xff1a; vue-quill-editor富文本编辑器上传图片默认为base64&#xff0c;存入数据库过于过于庞大&#xff0c;使用quill-image-extend-modulevue-quill-editor实现图片地址上传。 解决完之后效果图&#xff1a; 解决思路&#xff1a; 哈哈&#xff0c;第一步当然去…
阅读更多...
unity UI 加入image图片

unity UI 加入image图片

1.新建画布&#xff0c;新建image. 2.我们发现这个时候把Assets里的图片直接拖到Image上是行不通的。原因就是此时的图片没有设为sprite. 处理方法&#xff1a;点击图片&#xff0c;修改Texture Type为Sprite. 下图左边图片为调整后&#xff0c;右边图片为没有调整. 3.调整后就…
阅读更多...
js预览本地图片

js预览本地图片

本地图片在上传服务器前&#xff0c;如何预览效果&#xff1f; 一个方法就可以了&#xff0c;主要是如何从事件中读取文件数据&#xff0c;放到<img>展示 幸运的是&#xff0c;事件中的图片数据已经被转换成<img>可直接识别的内容&#xff0c;直接赋值给<img&g…
阅读更多...
python QT 图片缩放，移动

python QT 图片缩放，移动

python QT graphicsView控件实现图片的缩放与移动 1、效果图2、界面搭建3、实现方法3.1、构建处理图元的类3.1、绘制图像3.2、拖拽方法实现3.3、缩放方法实现 4、调用方法 1、效果图 选择图片后可在graphicsView窗口中显示选择的图片&#xff0c;可以用鼠标拖拽图片。当鼠标停…
阅读更多...
Unity UI修改Image中的图片资源

Unity UI修改Image中的图片资源

Unity UI修改Image中的图片资源 一、取资源文件 把资质文件放到Assets文件夹下Resources文件中。 二、在属性面板下修改图片类型 三、在脚本中修改需要修改的资源 Sprite sprite Resources.Load(“Images/2”); //Images文件夹下名为2的图片 Image2.sprite sprite; //修改…
阅读更多...
Linux命令scp用法

Linux命令scp用法

本文主要讲的是scp用法如果哪里不对欢迎指出&#xff0c;主页https://blog.csdn.net/qq_57785602?typeblog scp 可以在win系统使用&#xff0c;本文百分之八十写的是win系统怎么使用&#xff0c;在本地上到服务器文件,从服务器下载文件到本地 用工具连接到公司服务器时&#x…
阅读更多...
linux远程cp命令,Linux cp scp命令使用

linux远程cp命令,Linux cp scp命令使用

cp 拷贝命令&#xff0c;用来对文件或者子目录进行拷贝操作的。 scp 是secure copy的简写&#xff0c;用于在Linux下进行远程拷贝文件的命令&#xff0c;和它类似的命令有cp&#xff0c;不过cp只是在本机进行拷贝不能跨服务器&#xff0c;而且scp传输是加密的。可能会稍微影…
阅读更多...
linux 使用scp命令,Linux scp命令使用实例汇总

linux 使用scp命令,Linux scp命令使用实例汇总

Linux下要实现两台服务器之间的文件传送&#xff0c;使用scp命令就可以了&#xff0c;在Linux系统中&#xff0c;scp命令的用法简单而又实用&#xff0c;系统之家就给大家介绍下如何使用scp命令进行Linux服务器之间的文件传送。 scp是secure copy的简写&#xff0c;用于在Linux…
阅读更多...
linux中scp命令用法

linux中scp命令用法

问题&#xff1a;经常用到文件分发到另一个机器&#xff0c;怎么做&#xff1f; 每次连接一个机器&#xff0c;把压缩包上传上去&#xff0c;然后解压修改&#xff0c;这样在太麻烦。linux的cp命令可以复制文件&#xff0c;能不能吧修改好的文件复制过去呢&#xff1f; 一、cp…
阅读更多...
scp命令的使用

scp命令的使用

Linux scp 命令用于 Linux 之间复制文件和目录&#xff1b;scp 是 secure copy 的缩写, scp 是 linux 系统下基于 ssh 登陆进行安全的远程文件拷贝命令&#xff1b;scp 是加密的&#xff0c;rcp 是不加密的&#xff0c;scp 是 rcp 的加强版。 用法&#xff1a; scp [可选参数]…
阅读更多...
scp命令使用方法

scp命令使用方法

scp 命令是用于通过 SSH 协议安全地将文件复制到远程系统和从远程系统复制文件到本地的命令。使用 SSH 意味着它享有与 SSH 相同级别的数据加密&#xff0c;因此被认为是跨两个远程主机传输文件的安全方式。 基本语法 下面提供了 SCP 命令的基本语法&#xff1a; $ scp [opt…
阅读更多...
unity仓库管理简易模型(一)

unity仓库管理简易模型(一)

1. 环境 unity2018 2. 运行截图 3. 功能 1. 场景漫游 提供第一视角模式和自由模式。第一视角使用unity自带的角色控制器包实现角色移动视角移动&#xff0c;自由模式实现鼠标拖拽&#xff0c;场景缩放。 2. 商品定位 通过输入商品信息&#xff0c;在三维场景中定位到商品…
阅读更多...
计算机网络基础（类别 | 性能指标 | OSI模型初识）

计算机网络基础（类别 | 性能指标 | OSI模型初识）

目录 计算机网络类别 根据作用的范围分类 局域网&#xff08;LAN&#xff09; 广域网&#xff08;WAN&#xff09; 根据使用者分类 按照拓扑结构来分类 按照交换方式分类 按照工作方式分类 性能指标 什么是带宽 速率 吞吐量 时延 传播时延和带宽的乘积 往返时间…
阅读更多...
（附源码）springboot学生宿舍管理系统 毕业设计 211955

（附源码）springboot学生宿舍管理系统 毕业设计 211955

摘 要 科技进步的飞速发展引起人们日常生活的巨大变化&#xff0c;电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流&#xff0c;人类发展的历史正进入一个新时代。在现实运用中&#xff0c;应用软件的工作…
阅读更多...
数据蛙9套SQL面试题笔记

数据蛙9套SQL面试题笔记

数据分析SQL面试题目9套汇总 题目来源&#xff1a; https://www.jianshu.com/p/0f165dcf9525 关于这套题的笔记 一、 解题思路&#xff1a; 1、用concat实现连接 2、还需要按照“用户号”分组&#xff0c;将每组中的前两个“场景”号间接&#xff0c;这时需要用到 GROUP_C…
阅读更多...
tp6中无限极分类里面的获取多级分类数据

tp6中无限极分类里面的获取多级分类数据

作者&#xff1a;陈业贵 华为云享专家 51cto(专家博主 明日之星 TOP红人) 文章目录 前言一、什么是多级分类数据&#xff1f;二、使用步骤sql代码2.效果图 总结 前言 和大家共同完成获取多级分类数据 一、什么是多级分类数据&#xff1f; 就是很多很多的数据&#xff0c;按照…
阅读更多...
推荐文章

Copyright @ 2022~2023