Widget:CGWinJSSimple

<script>

//根据url获取图片大小 var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if (img.complete) { callback(img.width, img.height); } else { img.onload = function () { callback(img.width, img.height); img.onload = null; }; img.onerror = function () { callback(0,0); img.onload = null; }; }; };

//根据CG和屏幕大小设置CG显示区大小和位置 function setCGWin(cg_w,cg_h) { var cgWin = document.getElementById('showImgInfo'); var scn_w = window.innerWidth; var scn_h = window.innerHeight; var scn_r = scn_w/scn_h; var cg_r = cg_w/cg_h; var cgwin_w = 0; var cgwin_h = 0; if(cg_r>scn_r) { //此时以屏幕宽度为基准 if(scn_h>scn_w) { cgwin_w = scn_w; } else { cgwin_w = scn_w*0.8; } cgwin_h = cgwin_w/cg_r; } else { if(scn_h>scn_w) { cgwin_h = scn_h*0.8; } else { cgwin_h = scn_h; } cgwin_w = cgwin_h*cg_r } cgwin_w = parseInt(cgwin_w); cgwin_h = parseInt(cgwin_h); //设置CG窗口大小 cgWin.style.width = cgwin_w+"px"; cgWin.style.height = cgwin_h+"px"; //设置CG窗口位置 cgWin.style.left = parseInt((scn_w-cgwin_w)/2)+"px"; cgWin.style.top = parseInt((scn_h-cgwin_h)/2)+"px"; }

//设置CG大图显示区 function setCGWinInfo(cginfo) { var cgWin = document.getElementById('showImgInfo'); cgWin.style.background = "url('"+cginfo['cgpath']+"') "; if(cginfo['cgpath']=="") { cgWin.style.cssText = cgWin.style.cssText+'background-color:#00000080;'; } else { cgWin.style.cssText = cgWin.style.cssText+'background-size:contain;background-repeat:no-repeat;'; } var cg_w = cginfo['cgwidth']; var cg_h = cginfo['cgheight']; setCGWin(cg_w,cg_h); }

//获取CG信息 function getCGInfo(cgdiv,callback) { if(cgdiv.className != 'smallimg') { var info = {"cgpath":"","cgwidth":0,"cgheight":0}; callback(info); } else { var cur_cgpath = ""; var cur_cgimg_w = 1920; var cur_cgimg_h = 1080; //获取点击CG的图片路径和宽高 try{ cur_cgpath = cgdiv.getElementsByClassName('cgTrueLink')[0].getElementsByTagName('a')[0].href; }catch(e){ info = {"cgpath":cur_cgpath,"cgwidth":cur_cgimg_w,"cgheight":cur_cgimg_h}; callback(info); } imgLoad(cur_cgpath,function(w,h){ cur_cgimg_w = w; cur_cgimg_h = h; info = {"cgpath":cur_cgpath,"cgwidth":cur_cgimg_w,"cgheight":cur_cgimg_h}; callback(info); }); } }

//点击CG缩略图，显示大CG窗口（未做异常判定） function clickSmallCG(cur_cgdiv) { var cgWin = document.getElementById('showImgInfo'); if(window.getComputedStyle(cgWin, null).getPropertyValue("display") == 'none') { cgWin.setAttribute("style", "display:block"); } //先显示 setCGWinInfo({"cgpath":"","cgwidth":1920,"cgheight":1080}) //获取点击CG的图片信息 var cginfo = getCGInfo(cur_cgdiv,setCGWinInfo); }

//点击关闭 function clickClose() { var cgWin = document.getElementById('showImgInfo'); if(window.getComputedStyle(cgWin, null).getPropertyValue("display") == 'block') { cgWin.setAttribute("style", "display:none"); } }

// 当页面加载完毕 window.onload = function(){ //CG缩略图的点击事件绑定 var smallcgs = document.getElementsByClassName('smallimg'); for(var i=0;i<smallcgs.length;i++) { smallcgs[i].onclick = function(){ clickSmallCG(this); } } //点击大图区可以关闭 document.getElementById("showImgInfo").onclick=function(){ clickClose(); } } </script>