Saber 酱的抱枕

Fly me to the moon

07/14
2017
学习

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

saber 撰写 14条回复 3,871次查看

css3 javascript js scale wordpress 图片放大

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

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

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

实现步骤如下：

首先添加css样式：

.img_scale_wrap{overflow: hidden;} /*外层元素*/
.post_t img{transition:1s;} /*设置过渡时间*/
.post_t img[data-scale]:hover{transform: scale(1.2);} /*放大效果*/

然后添加JavaScript代码：

var post_img = document.querySelectorAll(".post_t img");	// 获取所有图片
if (post_img.length > 0) {
    // 给图片添加缩放控制层
    function set_post_img_wrap(img) {
    	if (img.height>=500) {	// 大于一定尺寸的才添加放大效果
    		img.setAttribute("data-scale", "");	// 添加放大属性
    		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选择器。

相关文章：

JavaScript网页下雪、雪花特效
做了一个js控制的进度条效果
使用立即执行函数创建独立作用域
使用toBlob()方法将canvas对象转换为Blob对象
去除百度贴吧的视频
使用css3动画制作网页底部走动的桌宠
使用css3动画给评论头像增加旋转效果
原生js中的利器——querySelectorAll

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

    1. saber 文章作者
      Google Chrome 60Google Chrome 60Windows 7Windows 7

      我没用过居中，如果你想要居中的话，可能要这样：
      先判断图片的css样式，判断是不是居中。如果是居中的，则把外层div也设置成居中（display blkock ; margin 0 auto ）。试试

      回复
  4. steven
    Google Chrome 59Google Chrome 59GNU/Linux x64GNU/Linux x64

    /*************************************************************************
    * 函数名称：zoom_picture()
    * 功能说明：设置图片放大特效
    * 参数说明：use_computer用于判断是否为电脑访问
    * 函数返回：无
    * 完成时间：2017-07-23 11:37:23
    *************************************************************************/
    function zoom_picture() {
    var use_computer = false; //默认不是电脑
    // 先判断访问设备
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    use_computer = !(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM);
    //是电脑才放大
    if (use_computer) {
    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);
    }
    }
    }
    };
    }
    }

    zoom_picture();

    回复
  5. steven
    Google Chrome 59Google Chrome 59GNU/Linux x64GNU/Linux x64

    博主，想跟你探讨第二段代码的一个小bug，在我的wordpress中出现了，控制台显示你的没有出现，不知道你是怎样避免的。由于我们实验室网速不是很快，所以第二段代码会有一个小bug，控制台打印如下:Uncaught ReferenceError: post_img_wrap is not defined 。也就是说，对于网速比较慢的用户，可能在一张图片都没有加载完毕的时候，就执行了post_img_wrap.onload这一行，而此时由于没有一张图片被加载，所以set_post_img_wrap(img)函数一次都没有运行过，所以会报刚才的错误。我在你代码的基础上增加了一个布尔变量，就不会报错了:
    $(document).ready(function() {
    var post_img = document.querySelectorAll(".post_t img"); //选择图片
    var has_load_picture = false;
    console.log(post_img.length);
    if (post_img.length > 0) {
    //给图片添加外层元素
    function set_post_img_wrap(img) {
    has_load_picture = true;
    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 if (has_load_picture) { //未加载完成的图片等到加载完再进行设置，否则获取不到宽高
    post_img_wrap.onload = function() {
    set_post_img_wrap(this);
    }
    }
    }
    }
    });

    回复
    1. saber 文章作者
      Google Chrome 59Google Chrome 59Windows 7Windows 7

      我想这个可能也和js代码加载的位置有关，我是加载在文章底下的，这样应该不会出问题。
      如果你加在了文章前面，就获取不到图片，所以需要document.ready这样处理一下

      回复