添加图片放大效果和桃心效果

添加图片放大效果和滚动缩放效果


  • 找到主题文件夹下的目录/source/js/src/post-details.js
  • 添加下面代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    // 图片放大
    $(document).ready(function() {
    $(document.body).append('<div class="lee-increase"><img src=""></div>');
    var isShow=false;
    $(".post-body img").on("click",function() {
    var src=$(this).attr("src");
    var alt=$(this).attr("alt");
    $(".lee-increase").show().children("img").attr("src", src).attr("alt",alt).width("auto");
    $(document.body).css("overflow","hidden");
    isShow=true;
    })
    $(".lee-increase").on("click",function() {
    $(this).hide();
    $(document.body).css("overflow","auto");
    isShow=false;
    })
    // 鼠标滚动放大缩小
    $(document).on('mousewheel DOMMouseScroll', function(e) {
    if(!isShow) return;
    e.preventDefault();
    var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail;
    var delta = Math.max(-1, Math.min(1, wheel) );
    var w=$(".lee-increase img").width();
    if(delta<0){//向下滚动
    $(".lee-increase img").width(w+50);
    }else{//向上滚动
    $(".lee-increase img").width(w-50);
    }
    });
    });
  • 找到主题文件夹下的目录/source/css/_custom/custom.styl

  • 添加下面代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    // 图片放大
    .post-body img{
    cursor: pointer;
    cursor: zoom-in;
    }
    .lee-increase{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333;
    background-color: #333c;
    z-index: 99999;
    display: none;
    &>img{
    max-width: 90%;
    min-width: 20%;
    position: absolute;
    top: 50%;
    left: 50%;
    cursor: pointer;
    cursor: zoom-out;
    transform: translate(-50%, -50%);
    }
    }

点击出现桃心效果


  • 在post-details.js后面继续添加代码
    1
    !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
0%