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

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


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