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

发表于 分类于 评论次数： 阅读次数：
给hexo文章中的图片添加点击放大，滚动缩放效果，和点击页面出现桃心特效

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

  • 找到主题文件夹下的目录/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);