1 Star 3 Fork 0

小枫/js轻量级图片暗箱插件 - by:小枫

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
xf-PictureBlackbox.min.js 4.79 KB
一键复制 编辑 原始数据 按行查看 历史
小枫 提交于 2023-07-24 09:04 . 添加data-popUp属性
function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter)}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}document.addEventListener('DOMContentLoaded',function(){var linkCss=document.createElement('link');linkCss.setAttribute('rel','stylesheet');linkCss.setAttribute('type','text/css');linkCss.setAttribute('href','./xf-PictureBlackbox.min.css');document.head.appendChild(linkCss);var domId=document.querySelectorAll('#xf-PicBlackbox');var domClass=Array.from(document.querySelectorAll('.xf-PicBlackbox'));var PicBlackbox=[].concat(_toConsumableArray(domId),domClass);var eleImg=document.querySelectorAll('img[data-src]');if(eleImg.length){var callback=function callback(entries){entries.forEach(function(entry){if(entry.isIntersecting){var imgDom=entry.target;var data_src=imgDom.getAttribute('data-src');imgDom.setAttribute('src',data_src);imgDom.removeAttribute('data-src');imgDom.classList.add('xf-showImg');observer.unobserve(imgDom)}})};var observer=new IntersectionObserver(callback);eleImg.forEach(function(images){observer.observe(images)})}PicBlackbox.forEach(function(dom){dom.addEventListener('click',function(e){var dataPopup=this.getAttribute('data-popup');if(!this.getAttribute('data-pic'))if(dataPopup!==null)return;e.preventDefault();var mainBoxNum=document.querySelectorAll('.xf-mainBox').length;if(mainBoxNum){alert('每次只能创建一次dom元素啊亲~');return false}var picLink=this.getAttribute('data-pic')||this.src;var zdyText=this.getAttribute('data-text');if(picLink===null||picLink===''){alert('检测到你标签里未添加data-pic属性或没有图片路径');return false}var xfMainBox=createElementWithClass('div','xf-mainBox');var insideDiv=createElementWithClass('div','xf-fadeOutDiv');var masking=createElementWithClass('div','xf-masking');var newImg=createElementWithClass('img','xf-fadeOutPic');var newP=createElementWithClass('p','xf-fadeOutText');var delDom=createElementWithClass('i','xf-delDom');delDom.textContent='×';newImg.src=picLink;newP.textContent=zdyText;var children=[newImg,delDom];if(zdyText!==null){newImg.alt=zdyText;children.splice(1,0,newP)}insideDiv.append.apply(insideDiv,children);xfMainBox.append(insideDiv,masking);document.body.appendChild(xfMainBox);var pic=document.querySelector('.xf-fadeOutPic');var fadeOutDiv=document.querySelector('.xf-fadeOutDiv');var img=new Image();img.onload=function(){var w=img.width;var h=img.height;if(w>h){pic.style.width="100%";fadeOutDiv.classList.add('Div-w')}else if(w<h){pic.style.height="100%";fadeOutDiv.classList.add('Div-h')}else{pic.style.width="100%";pic.style.height="100%";fadeOutDiv.classList.add('Div-center')}};img.src=picLink;var mainBox=document.querySelector('.xf-mainBox');mainBox.classList.add('xf-fadeIn');var xfTextCopy=document.querySelector('.xf-fadeOutText');if(xfTextCopy){var alertBox=null;xfTextCopy.addEventListener('click',async function(){var text=xfTextCopy.textContent;function showSimpleAlert(text){alertBox.textContent=text}if(alertBox){showSimpleAlert(text)}else{alertBox=document.createElement('div');alertBox.classList.add('xf-simpleAlert');try{await navigator.clipboard.writeText(text);showSimpleAlert('复制成功')}catch(err){alert('复制失败')}document.body.appendChild(alertBox);setTimeout(function(){alertBox.style.left=0},50);setTimeout(function(){alertBox.style.left='-100%';setTimeout(function(){alertBox.remove();alertBox=null},500)},3050)}})}var xfImgDel=document.querySelector('.xf-masking');var xfdelDom=document.querySelector('.xf-delDom');xfImgDel.addEventListener('click',removeElement);xfdelDom.addEventListener('click',removeElement);function removeElement(){var classList=mainBox.classList;classList.remove('xf-fadeIn');classList.add('xf-fadeOut');setTimeout(function(){return mainBox.remove()},350)}});return false});function createElementWithClass(tagName,className){var ele=document.createElement(tagName);if(className){ele.classList.add(className)}return ele}});
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/xfwlclub/lightweight-image-blackbox.git
[email protected]:xfwlclub/lightweight-image-blackbox.git
xfwlclub
lightweight-image-blackbox
js轻量级图片暗箱插件 - by:小枫
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385