hexo实现图片单击放大

对应不同的主题需要修改一下东西，我的主题是BeanTech。

在合适的位置添加一下js代码，我是在themes\BeanTech\layout\_partial添加的。

<script>function createImgEventFullScreen() {var imgs = $(".post-container").find("img");console.log(imgs);for (var i = 0; i < imgs.length; i++) {// $(imgs[i]).click(createCover(imgs[i]));imgs[i].onclick = function (e) {var src = e.srcElement.currentSrc;var _this = $(this);console.log(_this);createCover(src,_this);}}function createCover(src,_this) {console.log(_this);console.log(src);var cover = $("<div id='outerDiv'  style='position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:5;width:100%;height:100%;display:none;'><div id='innerDiv' style='position:absolute;'><img  id='bigImg' style='border:5px solid #fff;' src=''/></div></div>");$("#outerDiv").remove();$("body").append(cover);imgShow("#outerDiv", "#innerDiv", "#bigImg", _this,src);}}function imgShow(outerDiv, innerDiv, bigImg, _this,src) {//var src = _this.attr("src"); //获取当前点击的common-img元素中的src属性$(bigImg).attr("src", src); //设置#bigImg元素的src属性/*获取当前点击图片的真实大小，并显示弹出层及大图*/$("<img/>").attr("src", src).load(function () {var windowW = $(window).width(); //获取当前窗口宽度var windowH = $(window).height(); //获取当前窗口高度var realWidth = this.width; //获取图片真实宽度var realHeight = this.height; //获取图片真实高度var imgWidth, imgHeight;var scale = 0.8; //缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放if (realHeight > windowH * scale) { //判断图片高度imgHeight = windowH * scale; //如大于窗口高度，图片高度进行缩放imgWidth = imgHeight / realHeight * realWidth; //等比例缩放宽度if (imgWidth > windowW * scale) { //如宽度仍大于窗口宽度imgWidth = windowW * scale; //再对宽度进行缩放}} else if (realWidth > windowW * scale) { //如图片高度合适，判断图片宽度imgWidth = windowW * scale; //如大于窗口宽度，图片宽度进行缩放imgHeight = imgWidth / realWidth * realHeight; //等比例缩放高度} else { //如果图片真实高度和宽度都符合要求，高宽不变imgWidth = realWidth;imgHeight = realHeight;}$(bigImg).css("width", imgWidth); //以最终的宽度对图片缩放var w = (windowW - imgWidth) / 2; //计算图片与窗口左边距var h = (windowH - imgHeight) / 2; //计算图片与窗口上边距$(innerDiv).css({ "top": h, "left": w }); //设置#innerDiv的top和left属性//console.log('****')$(outerDiv).fadeIn("fast"); //淡入显示#outerDiv});$(outerDiv).click(function () { //再次点击淡出消失弹出层$(this).fadeOut("fast");});}setTimeout(function () {createImgEventFullScreen();}, 1000)
</script>

这个js代码适用于任何主题，只需要修改以下的内容为自己主题的选择器就好。

ar imgs = $(".post-container").find("img");

如我的选择器是post-container:
就修改为post-container

欢迎访问我的个人博客，一起交流学习：赵先生

hexo实现图片单击放大相关推荐

Excel插入图片实现单击放大或缩小
Excel插入图片实现单击放大或缩小一.打开Excel,Alt+F11打开VBA(VBA自行安装) 二.双击ThisWorkbook,输入VBA代码 Sheet1为的工作薄1 Private Sub ...
Excel单元格插入图片并实现单击放大或缩小功能（含VBA代码）
文章目录 0 引言 1 提前准备VBA代码 1.1 ThisWorkbook的代码: 1.2 模块的代码: 2 设置步骤 2.1 VBA代码设置单元格 2.2 插入图片到单元格 2.3 以启用宏的方式 ...
ppt矩形里面的图片怎么放大缩小_ppt 怎么才能做到图片的放大缩小？？？？下面有图...
PPT图片点击放大缩小--PowerPoint中图片的巧妙切换在网上浏览图片时,我们只需单击小图片就可看到该图片的放大图.在课件设计时我们也常常需要这样的效果,如美术课中的欣赏课,既要同时欣赏某一时 ...
android图片拖动放大_Android拖放
android图片拖动放大 In this tutorial, we'll be implementing Android Drag and Drop functionality in our app ...
点击图片实现图片居中放大的功能
如题,我想要点击图片的时候弹出居中显示放大.这个功能也是看别人的实现方法而来的,只是有细微的变化轻松解决点击图片放大问题下面是我自己仿造他写的 <!DOCTYPE html> <h ...
通过css实现图片过渡放大的效果
通过css实现图片放大效果 css3当中有一个是过渡属性是transition,他要配和scale来使用,transition:scale(),这个括号里面填写数字,如果大于1,就是放大,如果小于1, ...
ppt矩形里面的图片怎么放大缩小_PPT图片如何点击放大
PPT图片如何点击放大 [提要]<[电脑]PPT中图片点击放大效果的实现>由小编收集整理的,谨供需要实现电脑的朋友参考.内容如下: 用PPT做产品展示时,我们需要让观众看清楚细节.但同时又 ...
DVDFab Photo Enhancer AI一款声称可以将图片无损放大到夸张的40倍大小的人工智能软件
最近国外又出了一款非常强大的图片处理神器,这款软件声称可以将图片无损放大到夸张的40倍大小,利用AI深度卷积神经网络,可以在不损失图片质量的情况下进行AI图片清晰化和放大操作. 这款神器软件可以媲美 ...
ZoomMarker 一款用于图片滚动放大拖动，且可以添加标记的jQuery插件
猛戳这里导航至项目地址. #Language Chinese English ZoomMarker 一款用于图片滚动放大拖动,且可以添加标记的jQuery插件在项目中需要实现类似地图应用那样的,具有 ...

hexo实现图片单击放大

hexo实现图片单击放大相关推荐

最新文章

热门文章