请问如何用jquery识别图片并点击弹出层放大(一张图片非缩略和原图关系)
类似如下效果:http://bbs.paidai.com/topic/148952
场景描述:
1.在html中有一张图片为test.jpg 实际宽度为500px,但css设置最大宽度显示为100px
2.但用户在html页中点击此图片时,自动弹出层显示此图原大小,即显示500px
谢谢您的答复 !
2 个解决方案
#1
<img src="aaa.jpg" orgurl="aaa-big.jpg"/>//图片添加一个orgurl属性,就是他的实际路径
$(function(){
$('img').click(function(){
var url = $(this).attr('orgurl');//如果不想添加orgurl路径或者说src属性就是实际的路径这里可以改成$(this).attr('src')
showBigImage(url,$(this));
});
})
function showBigImage(url,obj){
var maxWidth = 500;
var offset = obj.offset();
var start = {
width:obj.attr('width')||parseInt(obj.css('width')),
height:obj.attr('height')||parseInt(obj.css('height'))
}
$('<div></div>')
.attr('id', 'div_img_cover')
.css({ 'position': 'absolute', 'top': '0', 'left': '0', 'z-index': 9999,
'width': "100%",
'height': getWaitHeight(),
'text-align': 'center',
'font': 'bold 24px arial',
'background-repeat': 'no-repeat',
'background-position': 'center',
'background-attachment': 'fixed',
'opacity':0.8,
'background':'#000'
})
.appendTo('body');
var img = new Image();
$(img).css(start);
if(img.attachEvent){
img.attachEvent('onload',imgLoaded)
}else{
img.addEventListener('load',imgLoaded,false);
}
img.src = url;
function imgLoaded(){
var imgWidth = img.width,imgHeight = img.height;
var newWidth = imgWidth > maxWidth ? maxWidth : imgWidth;
var newHeight = imgHeight/imgWidth*newWidth
var end = {
width:parseInt(newWidth),
height:parseInt(newHeight)
}
var container = $('<div></div>').appendTo('body');
container.css('position','absolute');
container.css(offset);
container.attr('id','container');
container.append(img);
var css = setElementCenter('#container',1,end);
$(img).animate(end,200);
container.animate(css,200);
$('#div_img_cover').click(function(){
var that = $(this);
$(img).animate(start,200);
container.animate(offset,200,function(){
that.remove();
$(this).remove();
});
});
}
function setElementCenter(selector,pos,finalSize){
var position = $(selector).css('position')=='fixed';
var winSize = myGetWinSize();
var elementSize = finalSize || getElementSize(selector);
var finalTop =(winSize.height-elementSize.height)/2 + parseInt((!position ? winSize.scrollTop : 0)),
finalLeft=(winSize.width-elementSize.width)/2+winSize.scrollLeft;
var finalCss = {
left:finalLeft,
top:position ? finalTop : (finalTop<winSize.scrollTop ? winSize.scrollTop : finalTop)
}
if(!pos){
$(selector).css({'position':position ?'fixed' : 'absolute','z-index':10000});
$(selector).css(finalCss);
}
$(selector).css({'z-index':10000});
return finalCss;
}
function myGetWinSize(){
var size = {
width:document.documentElement.clientWidth || document.body.clientWidth,
height:document.documentElement.clientHeight || document.body.clientHeight,
scrollTop:$(window).scrollTop(),
scrollLeft:$(window).scrollLeft()
}
return size;
}
function getElementSize(selector){
return {
width:$(selector).width(),
height:$(selector).height()
}
}
function getWaitHeight(){
var scrollHeight,
offsetHeight;
// handle IE 6
if ($.browser.msie && $.browser.version < 7) {
scrollHeight = Math.max(
document.documentElement.scrollHeight,
document.body.scrollHeight
);
offsetHeight = Math.max(
document.documentElement.offsetHeight,
document.body.offsetHeight
);
if (scrollHeight < offsetHeight) {
return $(window).height() + 'px';
} else {
return scrollHeight + 'px';
}
// handle "good" browsers
} else {
return $(document).height() + 'px';
}
}
#2
window.open('图片src');
一般都这样做,直接新窗口打开就ok了,一张图片而已,不用弹出层
一般都这样做,直接新窗口打开就ok了,一张图片而已,不用弹出层
#1
<img src="aaa.jpg" orgurl="aaa-big.jpg"/>//图片添加一个orgurl属性,就是他的实际路径
$(function(){
$('img').click(function(){
var url = $(this).attr('orgurl');//如果不想添加orgurl路径或者说src属性就是实际的路径这里可以改成$(this).attr('src')
showBigImage(url,$(this));
});
})
function showBigImage(url,obj){
var maxWidth = 500;
var offset = obj.offset();
var start = {
width:obj.attr('width')||parseInt(obj.css('width')),
height:obj.attr('height')||parseInt(obj.css('height'))
}
$('<div></div>')
.attr('id', 'div_img_cover')
.css({ 'position': 'absolute', 'top': '0', 'left': '0', 'z-index': 9999,
'width': "100%",
'height': getWaitHeight(),
'text-align': 'center',
'font': 'bold 24px arial',
'background-repeat': 'no-repeat',
'background-position': 'center',
'background-attachment': 'fixed',
'opacity':0.8,
'background':'#000'
})
.appendTo('body');
var img = new Image();
$(img).css(start);
if(img.attachEvent){
img.attachEvent('onload',imgLoaded)
}else{
img.addEventListener('load',imgLoaded,false);
}
img.src = url;
function imgLoaded(){
var imgWidth = img.width,imgHeight = img.height;
var newWidth = imgWidth > maxWidth ? maxWidth : imgWidth;
var newHeight = imgHeight/imgWidth*newWidth
var end = {
width:parseInt(newWidth),
height:parseInt(newHeight)
}
var container = $('<div></div>').appendTo('body');
container.css('position','absolute');
container.css(offset);
container.attr('id','container');
container.append(img);
var css = setElementCenter('#container',1,end);
$(img).animate(end,200);
container.animate(css,200);
$('#div_img_cover').click(function(){
var that = $(this);
$(img).animate(start,200);
container.animate(offset,200,function(){
that.remove();
$(this).remove();
});
});
}
function setElementCenter(selector,pos,finalSize){
var position = $(selector).css('position')=='fixed';
var winSize = myGetWinSize();
var elementSize = finalSize || getElementSize(selector);
var finalTop =(winSize.height-elementSize.height)/2 + parseInt((!position ? winSize.scrollTop : 0)),
finalLeft=(winSize.width-elementSize.width)/2+winSize.scrollLeft;
var finalCss = {
left:finalLeft,
top:position ? finalTop : (finalTop<winSize.scrollTop ? winSize.scrollTop : finalTop)
}
if(!pos){
$(selector).css({'position':position ?'fixed' : 'absolute','z-index':10000});
$(selector).css(finalCss);
}
$(selector).css({'z-index':10000});
return finalCss;
}
function myGetWinSize(){
var size = {
width:document.documentElement.clientWidth || document.body.clientWidth,
height:document.documentElement.clientHeight || document.body.clientHeight,
scrollTop:$(window).scrollTop(),
scrollLeft:$(window).scrollLeft()
}
return size;
}
function getElementSize(selector){
return {
width:$(selector).width(),
height:$(selector).height()
}
}
function getWaitHeight(){
var scrollHeight,
offsetHeight;
// handle IE 6
if ($.browser.msie && $.browser.version < 7) {
scrollHeight = Math.max(
document.documentElement.scrollHeight,
document.body.scrollHeight
);
offsetHeight = Math.max(
document.documentElement.offsetHeight,
document.body.offsetHeight
);
if (scrollHeight < offsetHeight) {
return $(window).height() + 'px';
} else {
return scrollHeight + 'px';
}
// handle "good" browsers
} else {
return $(document).height() + 'px';
}
}
#2
window.open('图片src');
一般都这样做,直接新窗口打开就ok了,一张图片而已,不用弹出层
一般都这样做,直接新窗口打开就ok了,一张图片而已,不用弹出层