<html>
<head>
<style type='text/css'>
#theImage{
float:left;
padding:5px 5px 5px 0;
}
</style>
<script src="js/jquery-1.5.1.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#theImage').click(function(){
var background=$('<div/>');
$(background).attr('id','overlayBackground')
.animate({
'opacity':'0.8'},
1000)
.css(
{
"display": "block",
"position": "absolute",
"left": 0,
"top": 0,
"backgroundColor": "#ccc",
"opacity": "0.8",
"width": $(document).width(),
"height": $(document).height(),
"zIndex": 100
}
);
$('body').append(background);
//
var newImage=$('<img/>');
var width=$('body').width();
var height=$('body').height();
$(newImage).attr('src',$(this).attr('src'))
.attr('id','largeImage')
.css({
'display':'none',
'position':'absolute',
'top':height/2-400/2,
'left':width/2-600/2,
'width':600,
'height':400,
'zIndex':101
});
$('body').append(newImage)
$(newImage).fadeIn(2000,function(){
$(this).bind('click',function(){
$(this).fadeOut(1000);
$('div#overlayBackground').fadeOut(1000,function(){
$(this).remove();
});
});
});
});
});
$('body').append('background');
</script>
</head>
<body>
<p>
<img src='images/londoneye.jpg' style="width:150px;height:150px" id='theImage'>
点击小图，会自动弹出大图
</p>
</body>
</html>
扫一扫
511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
