saber酱的抱枕

昨天我在初音社（www.mikuclub.cn）看到了这个效果，有些地方的图片在鼠标经过时会放大，感觉很棒，整个网页似乎生动了不少，今天我也给自己的网站添加上了这个效果。

首先分析一下原理：在图片外层套了一个容器，这个容器和图片大小一样，设置超出隐藏。然后给图片添加上放大效果就可以了。

不过初音社应用这个效果的地方的宽高是固定的，但本站文章里的图片宽高是不一致的，所以需要用JavaScript来设定外层容器的宽高。

实现步骤如下：

首先添加css样式：

.img_scale_wrap{overflow: hidden;} /*外层元素*/
.post_t img{transition:1s;} /*设置过渡时间*/
/*.post_t img:hover{transform: scale(1.2);}*/ /*图片放大规则。但在移动端一些浏览器上，点击图片等同于触发hover效果，所以这句规则可以考虑用js来动态添加，避免在移动端也生效*/

然后添加JavaScript代码：

if (isPC) { // 仅在pc端启用此效果，此处按自己需要处理
    var post_img = document.querySelectorAll(".post_t img"); // 选择所有图片
    if (post_img.length > 0) {
	// 添加鼠标经过图片放大的css规则
	var img_scale_css=document.createElement("style");
	img_scale_css.innerHTML=".post_t img:hover{transform: scale(1.2);}";
	document.body.appendChild(img_scale_css);
        // 给图片添加外层元素
        function set_post_img_wrap(img) {
            var post_img_wrap = document.createElement("div");
            post_img_wrap.className = "img_scale_wrap";
            img.parentNode.insertBefore(post_img_wrap, img);
            post_img_wrap.appendChild(img);
            post_img_wrap.style.width = img.width + "px";
            post_img_wrap.style.height = img.height + "px";
        }
        // 给图片添加事件
        for (var i = post_img.length - 1; i >= 0; i--) {
            if (post_img[i].complete) { // 已加载完成的图片马上进行设置
                set_post_img_wrap(post_img[i]);
            } else { // 未加载完成的图片等到加载完再进行设置，否则获取不到宽高
                post_img[i].onload = function() {
                    set_post_img_wrap(this);
                }
            }
        }
    }
}

本文的代码也可以用在其他类型的网站上，不只是WordPress里才能用。但是移植时要按自己情况修改css选择器和js选择器。

给WordPress文章里的图片添加放大效果