请问如何用jquery识别图片并点击弹出层放大(一张图片非缩略和原图关系) 请问如何用jquery识别图片并点击弹出层放大(一张图片非缩略和原图关系)类似如下效果:http://bbs.paidai.com/topic/148952场景描述:1.在html中有一张图片为test.jpg 实际宽度为500px,但css设置最大宽度显示为100px2.但用户在html页中点击此图片时,自动弹出层显示此图原大小,即显示500px谢谢您的答复 !jquery弹出曾显示实际图 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <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'; } } window.open('图片src');一般都这样做,直接新窗口打开就ok了,一张图片而已,不用弹出层 谁帮忙详细解释下不能实现的原因,我是新手越详细越好。 请问一个JS中层的问题? js控制Div的不解之惑 数组 奇怪问题 JQUERY 24小时弹出一次 ie10开发者工具的选择框没了问题 读取网页的问题,大家快来帮忙呀!^_^ 梅花雪,过来救命啊~!~!~! [高难求解]将这段VBS函数翻译成JS 关于<SCRIPT language=VBScript>的问题 怎样实现以下的文字滚动效果? 为什么无法设置子节点的css属性
<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';
}
}
一般都这样做,直接新窗口打开就ok了,一张图片而已,不用弹出层