WEB前端

js+jquery浏览器全屏效果,弹出图片浏览器并可关闭

位置:首页 > WEB前端 > js教程,2019-08-03 20:34
js+jquery浏览器全屏效果,弹出图片浏览器并可关闭,适合浏览图片,在网上看到的,就整理下来。

js+jquery浏览器全屏效果,弹出图片浏览器并可关闭,适合浏览图片

浏览器全屏效果(图0)

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="jquery-1.9.1.js" type="text/javascript"></script>
  <script>
  //全屏模式
function fullScreen() {
var el = document.documentElement,
rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
wscript;
if(typeof rfs != "undefined" && rfs) {
rfs.call(el);
return;
}
if(typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if(wscript) {
wscript.SendKeys("{F11}");
}
}
}
 
//退出全屏
function exitFullScreen() {
var el = document,
cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
wscript;
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
return;
}
if (typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}

//缩略图替换 注意内容class应为content
function showpic(c,str){
$(c).find("img").click(function(){
fullScreen();
var oldtop=$(document).scrollTop();
window.scrollTo(0,0);
$("body").css("overflow","hidden").append("<div id=\"show\"><div><img src='"+this.src.toLowerCase().replace(str,"")+"' alt=\"点我关闭\"></div><dl class=bian2><dt></dt></dl></div>");
$("#show").before("<div class=\"show\"></div>");
var img=$(c).find("img");
for(var i=0;i<img.length;i++){
	if(img.eq(i).width()>100){$("#show").children("dl").children("dt").append("<dd><img src="+img.eq(i).attr("src")+"></dd>");}
	}
$("#show").children("dl").find("img").hover(function(){
	  $("#show").children("div").children("img").attr("src",this.src.toLowerCase().replace(str,""));
},function(){})

$("#show").children("div").click(function(){$("#show").remove();$(".show").remove();$("body").css("overflow","auto");window.scrollTo(0,oldtop);exitFullScreen();})
})
$(c).find("img").attr("alt","戳我试试").attr("title","戳我试试");
}

  </script>
  <title>Document</title>
  <style>
/*缩略图放大缩小*/
.show{position:absolute;z-index:991;background:#000;height:100%;width:100%;top:0px;}
#show{position:absolute;z-index:992;height:100%;width:100%;text-align:center;top:0px;overflow:hidden;background:url(side.jpg)}
#show div{height:100%;position:relative;margin-right:200px;}
#show div img{margin:auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;}
#show dl {height:100%;top:0px;marging-top:20px;position:absolute;right:0px;width:200px;background:#787878 url(1.gif); overflow-y:auto;overflow-x:hidden;;}
#show dl dt{width:180px;margin:0 auto;}
#show dl dd{padding:10px;}
#show img{max-height:95%;max-width:95%;border:solid #aaa 3px;border-radius: 5px;position:relative;}
#show img:hover{border:solid #fff 3px;box-shadow: 0px 0px 15px #aaa;}
  </style>
 </head>
 <body>
  
<div class="content">
<h1>js全屏图片显示效果,弹出图片浏览器</h1>
<img src="15162624314324979.jpg" style="width:300px" alt="js全屏图片显示效果,弹出图片浏览器"/>
<img src="15162624324986356.jpg" style="width:300px" alt="js全屏图片显示效果,弹出图片浏览器"/>
</div>
<script type="text/javascript">showpic(".content","small4_");</script>
 </body>
</html>

TAGS:浏览器全屏效果

猜你喜欢

NewHot