您的位置：首页 > Web前端 > JQuery

web图片点击全屏jquery

2016-04-21 16:38 537 查看

<html>
<head>
<script src="jquery-1.7.2.js"></script>
<script>
var wid=$(window).width();
var hei=$(window).height();
$(function(){
for(var i=0;i<8;i++){
$("table tr").append('<td align="center" style="width:100px;height:300px;"><div class="album"><img width="80px" src="460.jpg" /></div></td>');
}
$(".album").each(function(){
toPop($(this));
});
//console.log($(window).width());
});
function keyUpLis(e){
if(e.which==27){
var $toRecover=e.data.c;
$toRecover.next("center.toPop").fadeOut("normal",function(){
$("body").removeClass("popBG");
$("body").addClass("norBG");
$(".album").fadeIn("normal");
});
$(document).unbind("keyup",keyUpLis);
}
}
function toPop(o){
o.after('<center class="toPop" style="width:'+wid+'px;height:'+hei+'px;overflow-y:scroll;display:none;"><img width="600px" src="'+o.children("img").attr("src")+'" /></center>');
o.children("img").css("cursor","pointer");
o.children("img").hover(function(){
var im=o.children("img");
var width=im.attr("width");
width=parseInt(width.slice(0,width.length-2),10);
im.attr("width",(width+10)+"px");
im.css("boxShadow","3px 3px 3px #00ffff");
},function(){
var im=o.children("img");
var width=im.attr("width");
width=parseInt(width.slice(0,width.length-2),10);
im.attr("width",(width-10)+"px");
im.css("boxShadow","none");
});
o.children("img").click(function(){
$(".album").fadeOut("slow",function(){
$("body").removeClass("norBG");
//console.log("enter");
$("body").addClass("popBG");
o.next("center.toPop").fadeIn("slow");
$(document).bind("keyup",{c:o},keyUpLis);
});
});
}
</script>
<style>
.norBG{
background-color:white;
}
.popBG{
background-color:#555;
}
.toPop::-webkit-scrollbar{
width:5px;height:10px;background-color:#888;
}
.toPop::-webkit-scrollbar-track{
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
border-radius:2px/2px;
/*background-color:red;*/
}
.toPop::-webkit-scrollbar-thumb{
border-radius:2px;
-webkit-box-shadow:inset 0 0 3px red;
background-color:#ff9933;
}
</style>
</head>
<body class="norBack">
<table><tr valign="middle"></tr></table>
</body>
</html>

<script src='jquery-1.11.1.min.js'></script>
<style type="text/css">
.imgZ{
position: absolute;
z-index: 999;
}
</style>
<script type="text/javascript">
$.fn.extend({"imgZoom":function(scaleI, top){
var $imgs=this.find("img");
$imgs.css("opacity",0.7);
$imgs.css("filter","Alpha(opacity=70)");
var oriWidth=new Array();
for(var i=0;i<$imgs.length;i++){
oriWidth.push($imgs.eq(i).width());
}
var oriHeight=new Array();
for(var i=0;i<$imgs.length;i++){
oriHeight.push($imgs.eq(i).height());
}
$("body").append("<div class='shade' style='position:absolute;z-index:998;opacity:0.6;filter:Alpha(opacity=60);display:none;background-color:#666;top:0;left:0;'></div>")
var hasShown=false;
var stopMove=false;
$imgs.mouseenter(function(){
if(!stopMove){
$(this).css("border","1px #33f outset");
$(this).css("opacity",1);
$(this).css("filter","Alpha(opacity=100)");
$(this).animate({
"width":oriWidth[$imgs.index($(this))]+5
});
}
});
$imgs.mouseleave(function(){
if(!stopMove){
$(this).css("border","none");
$(this).css("filter","Alpha(opacity=70)");
$(this).animate({
"width":oriWidth[$imgs.index($(this))]
});
}
});
$imgs.click(function(){
if(!hasShown){
$(this).addClass("imgZ");
//var scale=oriHeight[$imgs.index($(this))]/oriWidth[$imgs.index($(this))];
$(this).animate({
"left": $(document).width()>oriWidth[$imgs.index($(this))]*scaleI+100?($(document).width()-oriWidth[$imgs.index($(this))]*scaleI)/2:50,
"top": top,
"width": oriWidth[$imgs.index($(this))]*scaleI,
"height":oriHeight[$imgs.index($(this))]*scaleI
},function(){
$("div.shade").width($(document).width()>oriWidth[$imgs.index($(this))]*scaleI+100?$(document).width():oriWidth[$imgs.index($(this))]*scaleI+100);
$("div.shade").height(oriHeight[$imgs.index($(this))]*scaleI+2*top>$(document).height()?oriHeight[$imgs.index($(this))]*scaleI+2*top:$(document).height());
$("div.shade").fadeIn("fast").delay(200).queue(function(){
hasShown=true;
$(this).dequeue();
});
});
stopMove=true;
}
});
$("body").click(function(){
if(hasShown){
var $zoomed=$("img.imgZ");
$zoomed.removeClass("imgZ");
$zoomed.animate({
"width": oriWidth[$imgs.index($zoomed)],
"height": oriHeight[$imgs.index($zoomed)]
});/*,function(){
$(this).removeClass("imgZ");
});*/
$("div.shade").fadeOut().delay(200).queue(function(){
hasShown=false;
$(this).dequeue();
});
stopMove=false;
}
});
}});
</script>
<table class="imgZoom"><tr><td align="center" style="padding:5px 5px 5px 15px;"><img height="900px" oncontextmenu="alert('For Reference Only');return false;" src="uu.jpg" /></td></tr></table>
$("table.imgZoom").imgZoom(3,50);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航