为本站制作了看图模式

05/9

2015

学习

saber 撰写 360 js 看图模式 2条回复 2,598次查看

2016.5.3 updata v1.1
添加了页码显示；
添加了鼠标滚轮控制上下切换图片的功能；
添加了esc退出看图模式的功能。（但实际使用中需要按两次esc，第一次esc是退出全屏模式，第二次按esc才是退出看图模式。）

时隔一年，有点感慨啊。

昨天在虚拟机里360安全浏览器查看网页上的一些问题，偶然发现，在有多张大图的页面中，360安全浏览器会询问是否开启看图模式。开了一下试了试，发现它是新开了个窗口并全屏置顶，在里面查看图片，在看图体验上确实好很多：

今天闲来无事，于是闭门造车（因为我今天做的时候没去再看360的），做了一个类似的效果出来，并且用在了本站上。本站的效果如下：

我做的这个没有做成全屏，也没有新开窗口，只是在页面上建立了一个遮罩层。没有360的特色化功能，右侧列表也没那么好看。不过更简洁一些，只有浏览和切换图片的功能。点击大图是下一张，但大图没有做做点击左侧、右侧跳到上一张/下一张图片的功能（百度图片的方法是在图片上做两个左右的div）。现在设置的是页面最少有3张图片才会启用看图模式，启用后在页面右侧会有个悬浮按钮，点击即可进入看图模式。每次打开不会恢复到上一次看到的图片，如果想要记住位置的话把代码中第二个“litImgIndex=0;”删掉即可。

除了右侧缩略图列表是固定宽度的，其他地方都可以适应页面变化。原本右侧缩略图列表的高度是固定的，但现在改成了自适应高度，手机上也能正常使用了。

本站使用中的代码贴在下边。需要在其他地方使用的话也很容易。下面代码的第25行，将需要的图片保存到了变量里。如果你拿去使用，把获取图片的代码改成符合你网站的就行。

最后，将函数“viweImgMode()”在window.onload()或$(document).ready()中调用即可。

<!--看图模式-->
<script src="http://cdn.bootcss.com/screenfull.js/2.0.0/screenfull.min.js"></script>
<style type="text/css">
    #viewImgModeRight ul{margin: 0;padding: 0;}
    #viewImgModeRight ul li{list-style: none;}
    #viewImgModeButton{width:25px;height:118px;text-align:center;font-size:14px;font-family:微软雅黑;position: fixed;z-index: 9999;background:#444;color:#fff;cursor: pointer;right:0;top:30%;border-radius: 4px;border:1px solid #000; }
    #viewImgModeWrap{position: fixed;z-index: 99999;top: 0;left: 0;width: 100%;height: 100%;background: #161616;}
    #viewImgModeRight{float: right;width: 160px;text-align: center;margin-top: 30px;}
    #viewImgModeLeft{float: right;height:100%;position: relative;text-align: center;}
    #yema{height: 30px;min-width: 40px; background:#0F0F0F;color: #fff;font-size:14px;padding: 0 20px;position: absolute;bottom: 2%;left: 50%;margin-left: -40px;z-index: 999;line-height: 30px;border-radius:4px;}
    #bigImg{max-width: 95%;max-height: 95%;position: absolute;}
    #preImg,#nextImg{width: 150px;height: 60px;cursor: pointer;border-radius: 8px;opacity: .6;}
    #preImg{background:url(/f/pre_next_bg.png) center 15px no-repeat  #000;}
    #nextImg{background:url(/f/pre_next_bg.png) center -65px no-repeat #000;}
    #imgList{position: relative;top: 0;left: 0;transition:.2s all linear;}
    .imgList_li{max-width: 130px;background: #111;margin: 14px auto;padding: 0px 0;}
    .imgList_li_img{max-width: 130px;max-height: 130px;cursor: pointer;vertical-align:middle;opacity: .7;}
    #exitViewImgMode{width: 150px;height: 40px;background: #000;text-align: center;line-height: 44px;font-size:14px;font-family:微软雅黑;color: #fff;cursor: pointer;letter-spacing: 1px;margin-top: 6px;}
    #imgListWrap{position: relative;height: 600px;overflow: hidden;margin: 6px 0;top: 0;background: #000;padding: 0px 0;border-bottom:10px solid #000;}
    .opacity10{opacity: 1;box-shadow:0px 0px 11px #51ADF5;}
</style>
<script type="text/javascript">
function viweImgMode (){
    //获取所有图片
    var postImg=document.getElementsByClassName("post_t")[0].getElementsByTagName("img");
    var bodyYuanCssText=document.getElementsByTagName('body')[0].style.cssText;
    var litImgIndex=0;
    //如果存在图片
    if (postImg.length>2) {
        //创建看图模式的按钮
        var viewImgModeButton=document.createElement("div");
        viewImgModeButton.id="viewImgModeButton";
        viewImgModeButton.innerHTML="进入看图模式";
        document.body.appendChild(viewImgModeButton);
        //创建图片对象
        function imgObj (src,width,height) {
            this.src=src;
            this.width=width;
            this.height=height;
        }
 
        //创建所有图片的对象
        var allImg=new Array();
        for (var i = 0; i < postImg.length; i++) {
            allImg[i]=new imgObj(postImg[i].getAttribute("src"),postImg[i].offsetWidth,postImg[i].offsetHeight);
        };
 
        //点击看图模式按钮时创建布局
        document.getElementById("viewImgModeButton").onclick=function (){
            if (!screenfull.isFullscreen){screenfull.request();}
            //如果看图模式的元素已经存在 则显示。有很多在创建时定义过的元素，此时会提示找不到（但是表现上没有发现异常），所以我还是重新获取了一遍。实际上，如果在下面的if中省略var来声明变量的话应该可以直接用。也可以考虑在这个if外定义变量。
            if (!!document.getElementById("viewImgModeWrap")) {
                _scrollTop=document.documentElement.scrollTop|| document.body.scrollTop;
                document.getElementById("viewImgModeWrap").style.display="block";
                document.getElementsByTagName('body')[0].style.cssText =bodyYuanCssText+"max-height:"+window.innerHeight+"px;overflow: hidden;";
                document.getElementById("bigImg").setAttribute("src", allImg[0].src);
                litImgIndex=0;
                for (var iiii = 0; iiii< document.getElementsByClassName("imgList_li_img").length; iiii++) {
                    document.getElementsByClassName("imgList_li_img")[iiii].className="imgList_li_img";
                };
                document.getElementsByClassName("imgList_li_img")[0].className+=" opacity10";
                document.getElementById("viewImgModeLeft").style.width=(document.body.clientWidth)-(document.getElementById("viewImgModeRight").offsetWidth)+"px";
                document.getElementById("imgList").style.top="0px";
                setCenter();
                //考虑到窗口大小可能已经改变，需要重新设置右侧的高度
                document.getElementById("imgListWrap").style.height=(document.body.clientHeight-250)+"px";                
            }
            //否则 创建元素
            else if (!document.getElementById("viewImgModeWrap")){
                //创建wrap
                var viewImgModeWrap=document.createElement("div");
                viewImgModeWrap.id="viewImgModeWrap";
                viewImgModeWrap.setAttribute("onselectstart","return false");
                viewImgModeWrap.innerHTML="<div id=\"viewImgModeRight\">    <ul style=\"width: 150px;\">        <li id=\"preImg\" title=\"查看上一张图片\"></li>       <div id=\"imgListWrap\"> <ul id=\"imgList\">    </ul>   </div>  <li id=\"nextImg\" title=\"查看下一张图片\"></li> <li id=\"exitViewImgMode\">退出看图模式</li>   </ul></div><div id=\"viewImgModeLeft\"> <img id=\"bigImg\" src=\"\" alt=\"\"  title=\"点击切换到下一张图片\"> <div id='yema'></div> </div>";
                document.body.appendChild(viewImgModeWrap);
 
                //存储并设置卷去的高度
                _scrollTop=document.documentElement.scrollTop|| document.body.scrollTop;
 
                document.getElementsByTagName('body')[0].style.cssText =bodyYuanCssText+"max-height:"+window.innerHeight+"px;overflow: hidden;";
 
                document.getElementById("imgListWrap").style.height=(document.getElementById("viewImgModeLeft").offsetHeight-240)+"px";
 
                //向右侧输出内容
                function creatRightLi(){
                    var imgList_li=document.createElement("li");
                    imgList_li.className="imgList_li";
                    imgList_li.innerHTML="<img src='' class='imgList_li_img'>";
                    document.getElementById("imgList").appendChild(imgList_li);
                }
                //创建右侧的li和img
                for (var ii = 0; ii < postImg.length; ii++) {
                    creatRightLi();
                };
                //设置右侧的高度
                document.getElementById("imgListWrap").style.height=(document.body.clientHeight-250)+"px";
 
                var rightImg=document.getElementsByClassName("imgList_li_img");
                var rightLi=document.getElementsByClassName("imgList_li");      //获取右侧缩略图的li，会存储每个li的高度以供图片向上滚动时使用。原本存储的是缩略图的高度，但是如果图片高度是97.5px，js取值的时候会是98，这种情况下会导致误差。所以改成了li
 
                //存储每个缩略图高度的数组
                litLiHeight=new Array();
                 
                //设置各个li里面img的属性
                for (var j = 0; j < rightImg.length; j++) {
                    //设置缩略图的路径
                    rightImg[j].setAttribute("src", allImg[j].src);
                    //存储缩略图li的高度
                    litLiHeight[j]=rightLi[j].offsetHeight;
                    rightImg[j].index=j;
                    rightImg[j].onclick=function  () {
                        bigImg.setAttribute("src", allImg[this.index].src);
                        setCenter();
                        for (var iii = 0; iii< rightImg.length; iii++) {
                            rightImg[iii].className="imgList_li_img";
                        };
                        this.className+=" opacity10";
                        litImgIndex=this.index;
                    }
                };
 
                var bigImg=document.getElementById("bigImg");
                //设置左侧区域的宽度
                var leftWrap=document.getElementById("viewImgModeLeft");
                leftWrap.style.width=(document.body.clientWidth)-(document.getElementById("viewImgModeRight").offsetWidth)+"px";
 
                //设置大图
                bigImg.setAttribute("src", allImg[0].src);
                rightImg[0].className+=" opacity10";
                function setCenter () {
                    document.getElementById("bigImg").style.marginTop=-(document.getElementById("bigImg").offsetHeight*0.5)+"px";
                    document.getElementById("bigImg").style.top="50%";
                    document.getElementById("bigImg").style.marginLeft=-(document.getElementById("bigImg").offsetWidth*0.5)+"px";
                    document.getElementById("bigImg").style.left="50%";
                };
                setCenter();
 
                var preImg=document.getElementById("preImg");
                var nextImg=document.getElementById("nextImg");
 
                function topreImg(){
                    litImgtop=null;
                    var litImgtop2=null;
                    if (litImgIndex>0) {
                        litImgIndex--;
                        bigImg.setAttribute("src", allImg[litImgIndex].src);
                        setCenter();
                        for (var iii = 0; iii< rightImg.length; iii++) {
                            rightImg[iii].className="imgList_li_img";
                        };
                        rightImg[litImgIndex].className+=" opacity10";
 
                        //如果已经是第一张图片了，则不改变top值
                        if (litImgIndex==0) {document.getElementById("imgList").style.top="0px";return false;};
 
                        for (var iiiii = 0; iiiii < litImgIndex; iiiii++) {
                            litImgtop+=(litLiHeight[iiiii]+14);//加上margin值和padding值，如果有。我这里margin-top是14
                            document.getElementById("imgList").style.top="-"+(litImgtop)+"px";
                        };
                 
                    }else{
                        //alert("当前已经是第一张图片了。");
                        return false;
                    };
                }
                 
                function tonextImg() {
                    litImgtop=null;
                    var litImgtop2=null;
                    if (litImgIndex<rightImg.length-1) {
                        litImgIndex++;
                        bigImg.setAttribute("src", allImg[litImgIndex].src);
                        setCenter();
                        for (var iii = 0; iii< rightImg.length; iii++) {
                            rightImg[iii].className="imgList_li_img";
                        };
                        rightImg[litImgIndex].className+=" opacity10";
 
                        for (var iiiii = 0; iiiii < litImgIndex; iiiii++) {
                            litImgtop+=(litLiHeight[iiiii]+14);//加上margin值和padding值，如果有。
                            document.getElementById("imgList").style.top="-"+(litImgtop)+"px";
                        };
                    }else{
                        //alert("当前已经是最后一张图片了。");
                        return false;
                    };
                }
 
                //设置页码显示
                function setNo (){  
                    document.getElementById("yema").innerHTML=(litImgIndex+1)+" / "+rightImg.length;
                }
                setNo ();   //先执行一次 显示出来
                 
                //上一张图片
                preImg.onclick=function  () {topreImg();setNo ();}
                 
                //下一张图片
                nextImg.onclick=function () {tonextImg();setNo ();};
 
//                bigImg.onclick=function () {window.open(this.src)};
                bigImg.onclick=function () {tonextImg();setNo ();};
                 
                //区别浏览器来添加鼠标滚轮事件
                function addEvent(obj,xEvent,fn) {
                    if(obj.attachEvent){
                        obj.attachEvent('on'+xEvent,fn);
                    }else{
                        obj.addEventListener(xEvent,fn,false);
                    }
                }  
                var fullDiv=document.getElementById("viewImgModeWrap");
                addEvent(fullDiv,'mousewheel',onMouseWheel);
                addEvent(fullDiv,'DOMMouseScroll',onMouseWheel);   
                 
                //当鼠标滚动时执行
                function onMouseWheel(ev) {
                    var ev = ev || window.event;
                    var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
                    down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;
                    if(ev.preventDefault){  //FF 和 Chrome
                        ev.preventDefault();// 阻止默认事件
                    }
                    if(down){
                       tonextImg();
                        setNo ();
                    }else{
                        topreImg();
                        setNo ();
                    }
                }
                 
                //当窗口改变时，重新计算左侧的宽度以及重设居中
                window.onresize=function  () {
                    leftWrap.style.width=(document.body.clientWidth)-(document.getElementById("viewImgModeRight").offsetWidth)+"px";
                    //重新设置右侧高度
                    document.getElementById("imgListWrap").style.height=(document.getElementById("viewImgModeLeft").offsetHeight-240)+"px";
                    setCenter();
                }
                 
                //退出看图模式
                function quitViewImgMode () {
                    if (screenfull.isFullscreen){screenfull.exit();}        
                    document.getElementById("viewImgModeWrap").style.display="none";
                    document.getElementsByTagName('body')[0].style.cssText=bodyYuanCssText;
                    if(navigator.userAgent.indexOf('AppleWebKit') > -1){//如果是chrome内核，则
                        document.body.scrollTop =_scrollTop;
                    }else{//否则
                        document.documentElement.scrollTop=_scrollTop;
                    }
                }
                 
                // 按下Esc 键时
                document.onkeydown=function(event){
                    var e = event || window.event || arguments.callee.caller.arguments[0];
                    if(e && e.keyCode==27){ 
                        quitViewImgMode();
                    }
                }; 
 
                //当点击退出按钮时
                document.getElementById("exitViewImgMode").onclick=function  () {quitViewImgMode()};
                 
            };
        }
    };
}
</script>
<!--看图模式end-->