05/9
2015
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-->
为本站制作了看图模式
-
Google Chrome 59
GNU/Linux x64 -
Google Chrome 59GNU/Linux x64
厉害了，我的哥，今天周五，刚好试试！
回复
成功了，除了那两个链接失效了，我已经修改了，其他没有问题。