记录一次修复handsome标题过长导致的图片底部空白的问题

前言

近期发现若博客文章标题超过一定长度，主题内置策略会使左侧缩略图的底部通过白色填充进而严重博客访问体验，动手写了一套js策略在前端修复了此问题。

此外，将毕设中的左右滑动切换页面思想在博客中有所体验。

解决

插入JavaScript：

// 修复handsome标题过长导致的图片下面空白的问题
function resize_img() {
    for (var i=1;i<=$('#post-panel > div > a').children().length;i++)
    {
        // 获取外面盒子的高度
        height_t = $("#post-panel > div > a:nth-child("+i+") > div > div.post-meta.wrapper-lg").outerHeight(true);
        // 设置图片的高度
        $("#post-panel > div > a:nth-child("+i+") > div > div.index-post-img-small.post-feature.index-img-small > div").css('height',height_t+'px');
    }
}
// 文档加载完毕时
$(document).ready(function(){
    resize_img()
});
// 窗口大小改变时
$(window).resize(function(){
    resize_img()
})

Pjax回调函数：

<!--修复handsome标题过长导致的图片下面空白的问题-->
resize_img();

滑动展开与关闭左边栏

4.7版本：

    // 滑动监听器
    var startx, starty;
    slide_flag=0;
  
    //获得角度
    function getAngle(angx, angy) {
        return Math.atan2(angy, angx) * 180 / Math.PI;
    };
  
    //根据起点终点返回方向
    function getDirection(startx, starty, endx, endy) {
        var angx = endx - startx;
        var angy = endy - starty;
        var result = 0;
    
        //如果滑动距离太短
        if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
            return result;
        }
    
        var angle = getAngle(angx, angy);
        if ((angle >= 172 && angle <= 180) || (angle >= -180 && angle < -172)) {
            result = 1;
        } else if (angle >= -6 && angle <= 6) {
            result = 2;
        }
        return result;
    }
  
    //手指接触屏幕
    document.addEventListener("touchstart", function(e){
        startx = e.touches[0].pageX;
        starty = e.touches[0].pageY;
    }, false);
    
    //手指离开屏幕
    document.addEventListener("touchend", function(e) {
        var endx, endy;
        endx = e.changedTouches[0].pageX;
        endy = e.changedTouches[0].pageY;
        var direction = getDirection(startx, starty, endx, endy);
        switch (direction) {
            case 1:
                if (slide_flag) {
                    $('#header > div.navbar-header.bg-dark > button.pull-left.visible-xs > i').click();
                    slide_flag = 0;
                }
                break;
            case 2:
                if (!slide_flag) {
                    $('#header > div.navbar-header.bg-dark > button.pull-left.visible-xs > i').click();
                    slide_flag = 1;
                }
                break;
            }
    }, false);

4.9更新

    // 滑动监听器
    var startx, starty;
  
    //获得角度
    function getAngle(angx, angy) {
        return Math.atan2(angy, angx) * 180 / Math.PI;
    };
  
    //根据起点终点返回方向
    function getDirection(startx, starty, endx, endy) {
        var angx = endx - startx;
        var angy = endy - starty;
        var result = 0;
    
        //如果滑动距离太短
        if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
            return result;
        }
    
        var angle = getAngle(angx, angy);
        if ((angle >= 172 && angle <= 180) || (angle >= -180 && angle < -172)) {
            result = 1;
        } else if (angle >= -6 && angle <= 6) {
            result = 2;
        }
        return result;
    }
  
    //手指接触屏幕
    document.addEventListener("touchstart", function(e){
        startx = e.touches[0].pageX;
        starty = e.touches[0].pageY;
    }, false);
    
    //手指离开屏幕
    document.addEventListener("touchend", function(e) {
        var endx, endy;
        endx = e.changedTouches[0].pageX;
        endy = e.changedTouches[0].pageY;
        var direction = getDirection(startx, starty, endx, endy);
        switch (direction) {
            case 1:
                if ($('aside').hasClass('off-screen')) {
                    $('#header > div.navbar-header.bg-dark > button.pull-left.visible-xs > i').click();
                }
                break;
            case 2:
                if (!$('aside').hasClass('off-screen')) {
                    $('#header > div.navbar-header.bg-dark > button.pull-left.visible-xs > i').click();
                }
                break;
            }
    }, false);

参考资料：

https://www.cnblogs.com/anniey/p/6591079.html

https://blog.csdn.net/RenOuQ/article/details/106184381

https://www.w3school.com.cn/jquery/jquery_ref_events.asp

https://blog.csdn.net/YOYOYOHUI/article/details/102782298

https://www.cnblogs.com/ChouXiaoShou/p/jQuery_children.html

版权属于：soarli

本文链接：https://blog.soarli.top/archives/659.html

转载时须注明出处及本声明。