请教怎么用jquery识别图片并点击弹出层放大(一张图片非缩略和原图关系)
请问如何用jquery识别图片并点击弹出层放大(一张图片非缩略和原图关系)
请问如何用jquery识别图片并点击弹出层放大(一张图片非缩略和原图关系)
类似如下效果:http://bbs.paidai.com/topic/148952
场景描述:
1.在html中有一张图片为test.jpg 实际宽度为500px,但css设置最大宽度显示为100px
2.但用户在html页中点击此图片时,自动弹出层显示此图原大小,即显示500px
谢谢您的答复 !
------解决方案--------------------
请问如何用jquery识别图片并点击弹出层放大(一张图片非缩略和原图关系)
类似如下效果:http://bbs.paidai.com/topic/148952
场景描述:
1.在html中有一张图片为test.jpg 实际宽度为500px,但css设置最大宽度显示为100px
2.但用户在html页中点击此图片时,自动弹出层显示此图原大小,即显示500px
谢谢您的答复 !
jquery
弹出曾显示实际图
------解决方案--------------------
<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)