<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>
分享到：
相关推荐
**jQuery弹出大图特效**是一种常见的网页交互设计，它为用户提供了一种便捷的方式来查看页面上的高分辨率图像。在网页设计中，这种功能通常用于展示产品细节、摄影作品或任何需要放大查看的内容。jQuery库因其易用性...
本文将详细探讨"jquery弹出层特效"这一主题，以及相关文件如何实现这一功能。 首先，标题"jquery弹出层特效"指的是使用jQuery库创建的弹出窗口或模态对话框效果。在网页设计中，弹出层通常用于显示警告信息、用户...
代码简介：jquery css3实现弹出层注册特效是一款效果非常酷的作品，也非常实用，用了css3样式实现弹出层注册特效，里面包含了两个插件，一个是表单验证，另一个是消息提示。
【jQuery全屏点击图片弹出查看器】是一个基于jQuery库实现的网页图片查看器特效，它允许用户在点击图片后以全屏模式查看大图。这个功能在网站中非常常见，尤其是在展示产品细节或者摄影作品时，能提供更好的用户体验...
jquery弹出层特效代码 网站是一个宣传互动平台，建设一个网站的成本远低于电视杂志媒体广告成本，目前互联网基本覆盖世界，范围触及各地区各年龄段各场合，因而对于单位企业、组织机构甚至个人来说，建设网站是一件...
通过使用JavaScript库如jQuery或Pure JavaScript，可以创建动态的图片画廊，使得用户可以通过点击或滑动来浏览图片。 2. **QQview图片查看上下页跟随**: “QQview图片查看上下页跟随.rar”可能实现的是一个类似QQ...
这个插件的核心功能是实现当鼠标悬停在图片上时，图片下方会滑动弹出标题的效果，从而为网站增添动态交互性，提升用户的浏览体验。 在网页设计中，jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理...
《jQuery弹性动画特效插件DomLastic.js深度解析...通过灵活的参数设置和丰富的示例，无论是新手还是经验丰富的开发者，都能够轻松地将这些生动的动画效果整合到自己的项目中，提升用户体验，创造出引人注目的网页作品。
"jQuery带对话框提示图片相册"是一个非常实用的JS特效，它实现了点击图片后以对话框形式弹出大图浏览的功能，给用户带来更加直观和舒适的视觉体验。本文将深入探讨这个特效的实现原理、关键技术和应用场景。 一、...
【jQuery全屏动态图片墙效果】是一种常见的网页交互设计，它为网站的视觉展示增添了生动性和吸引力。在网页设计中，这种效果常用于摄影、艺术作品或者产品展示，让用户能够以更加直观和互动的方式浏览内容。以下是...
jQuery LightBox是一款基于jQuery库的图片展示插件，它为网页中的图片提供了一种优雅的展示方式，让用户在原网页上即可体验到类似于弹出窗口的效果，同时带有放大镜功能，为用户提供更直观的细节查看。这种效果在...
"JS特效-其它代码"这个标签表明，"lake.js"是JavaScript特效的一种，但并不属于常见的类别，比如滑动、弹出框或者轮播图。它提供了一种创新的方式来增强网页的视觉体验，适用于各种创意网页设计，如产品展示、艺术...
`fancybox`是一个轻量级的弹出窗口插件，常用于图片预览和多媒体展示，而`cloud-zoom`则是一个专门的图片放大镜插件，提供更丰富的自定义选项和优化的性能。 在`index.html`中，开发者会将这些元素和脚本整合在一起...
JavaScript是一种客户端脚本语言，用于实现更复杂的交互效果，如拖放功能、实时内容更新、弹出对话框、计时器等。JavaScript库如jQuery、React、Vue等，提供了丰富的API和工具，简化了特效的开发。 4. **HTML5的新...
7. **JS特效-图片相册**：虽然这个标签表明了特效与JavaScript有关，但实际的图片切换效果可能由JavaScript库（如jQuery）或纯JavaScript代码实现，用于处理用户交互、计时器触发的自动切换等功能。 在【压缩包子...
jQuery响应式LightBox插件是一种广泛应用于网页设计中的JavaScript组件，它主要用于创建具有现代感的、响应式的图片查看器。这个插件利用了jQuery库的强大功能，为用户提供了一种优雅的方式来展示图片，尤其是在...
这些包括淡入淡出、滑动、弹出、旋转等多种视觉效果，使得网页的用户体验更加生动和吸引人。例如，使用 jQuery UI 的 "toggle()" 方法，可以轻松实现元素的显示与隐藏，配合动画效果，让页面动态更加流畅自然。 ...
接下来是`jquery+css3实现yoyo球效果`，这个特效利用了CSS3的强大动画能力，创造出如同弹跳玩具般的动态效果。Yoyo球效果通常用作吸引用户注意力的视觉元素，可以在网站的加载动画或者特定交互环节中使用。 `jQuery...
而“图片层中显示”的概念则更进一层，它意味着图片会在一个独立的层面上呈现，可能是弹出窗口、全屏视图或者是悬浮框。这种设计可以提供沉浸式的观图体验，让用户的注意力更加集中于当前查看的图片。例如，当用户...
`event.preventDefault()`阻止了浏览器默认的右键菜单弹出，然后我们自定义菜单内容并显示出来。 菜单的样式设计则依赖于CSS。Key社游戏风格通常带有柔和的色彩、细腻的纹理和特定的字体选择。开发者可以参照Key社...