您的位置:首页 > Web前端 > JavaScript

js图片放大

2015-09-08 10:51 597 查看
picZoom("#element")
function picZoom(ele){
$(function(){
var $ele=$(ele);
$ele.each(function(){
var $this=$(this);
$this.bind("click",function(){
var	$picSrc=$this.attr("src"),
$picH=$this.height(),
$picW=$this.width(),
wHeight=$(window).height(),
wWidth=$(window).width(),
scrTop=$(window).scrollTop(),
scrLeft=$(window).scrollLeft(),
dHeight=$(document.body).height(),
dWidth=$(document.body).width(),
$shadeDiv=$("<div id='shadeDiv'/>"),
$picWrap=$("<div id='picWrap' />"),
$pic=$("<img id='pic' />");
$shadeDiv.css({
'display':'none',
'position': 'absolute',
'left': 0,
'top': 0,
'width': dWidth,
'height': dHeight,
'background-color': '#000',
'opacity': 0.7,
'z-index': 998
}).show();
$picWrap.css({
'display':'none',
'position': 'absolute',
'left': 0,
'top': scrTop,
'width': wWidth,
'height': wHeight,
'z-index': 999
}).show();
$pic.attr("src",$picSrc);
if($picH>$picW){
$pic.css({
'position':'relative',
'left':(wWidth-($picW/$picH)*wHeight)/2,
'height':wHeight,
'width':($picW/$picH)*wHeight
});
}else{
$pic.css({
'position':'relative',
'top':(wHeight-($picH/$picW)*wWidth)/2,
'width':wWidth,
'height':($picH/$picW)*wWidth
});
}
$pic.bind("click",function(){
$shadeDiv.slideUp().remove();
$picWrap.slideUp().remove();

});
$picWrap.bind("touchmove",function(){
return false;
});

$picWrap.append($pic);
$("body").append($shadeDiv);
$("body").append($picWrap);
});
});
});

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: