saber酱的抱枕

Fly me to the moon

07/14
03:53
学习

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

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选择器。

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

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

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

      回复
  1. 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();

    回复
  2. 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这样处理一下

      回复

评论 saber 撤销评论