JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享_jquery

多的不说了,直奔主题,分享一个放大效果的popup dialog,项目中可以根据自己的需求来写css,我打算复用到metro风格的site上去。

看起来动画效果还是比较cool的,如果加上了处理后的效果更佳:

复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style>
body { background: #ace; font: 12px/1.2 Arial, Helvetica, sans-serif; }
ul li { background:#fff; margin:5px; width:100px; height:100px; float:left; }
#transition {
background:transparent;
display:none;
position:absolute; top:50%; left:50%; z-index:50;
z-index: 10001;
}
#content {
background:#fff;
border:1px solid #666;
margin:-50px 0 0 -50px;
width:100px; height:100px;
z-index: 10001;
}
#mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
display: none;
z-index: 10000;
}
.close
{
width:30px;
height:20px;
background-color:Red;
cursor:pointer;
display:none;
}
.closeShow
{
width:30px;
height:20px;
margin-left:50px;
margin-top:-100px;
background-color:Red;
cursor:pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('ul li').click(function (e) {
$("#mask").fadeTo(500, 0.25);
$("#content").html("<div>Loading....</div>");
var $t = $('#transition'),
to = $(this).offset();
var height = $(document).height();
var width = $(document).width();
$('#content').css({ width: 100, height: 100 });
$t.css({
top: to.top + 50,
left: to.left + 50,
display: 'block'
}).animate({
top: height / 2,
left: width / 2
}, 600, function () {
$(this).animate({
top: 125,
left: 175
}, 600);
$('#content').animate({
width: width * 0.8,
height: height * 0.8
}, 600, function () {
// open dialog here
$("#content").html("<div>Hello, please put content here.</div>");
});
});
});
$('#transition').click(function (e) {
$("#transition").hide();
$("#mask").hide();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<ul>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
</ul>
<div id='mask'></div>
<div id="transition"><div id="content">Loading....</div></div>
</form>
</body>
</html>

加入了mask效果,如果不需要可以直接删掉。

时间: 2024-04-30 20:15:48

JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享_jquery的相关文章

jquery制作鼠标拖动效果!

问题描述 <table cellpadding="0" class="table_border" cellspacing="1" width="100%"><tbody><tr><td valign="top" width="50px"><div id="unifiedViewMenu" class="c

利用HTML5制作图片放大效果的例子

HTML5有一个新的属性,contenteditable,它可以应用于任何元件,使得它可以直接在浏览器窗口中编辑.想与一个预定义的值的文本输入,但它还可以从字面上任何元素.表单元素如文本输入支持:重点伪类,它允许我们风格的元素时,点击后或导航.给人一种元素contenteditable属性意味着它现在也支持:重点伪类,开辟了一些有趣的可能性! 我们将利用这个小把戏来扩大图像(就像一个没有覆盖灯箱)在一些内容. HTML5代码 HTML5有很好的元素包括标题图像. <section class=&qu

jQuery教程:制作滑动动画效果的层

使用jQuery制作滑动动画效果的层 基本原理 这些具有动态效果的滑动盒都基于同样的基本原理.在你经过想要"窥见"对象中的其他两个项目,这个带有".boxgrid"的DIV标签充当着一个窗口.还不明白? 让这个图片来给你线索吧: 理解了这个基本原理之后,我们就可以利用滑动元素的动画效果来揭开或遮盖住要展示的区域,以此来创造滑动效果. 第一步 – CSS 基础工作 在上面给出基本结构的启示图中,我们需要使用一点CSS来让它显示出预期的效果.下面这个CSS定义了查看窗口

jQuery实现为图片添加镜头放大效果的方法_jquery

本文实例讲述了jQuery实现为图片添加镜头放大效果的方法.分享给大家供大家参考.具体如下: 运行效果如下图所示: 主要代码如下: $(function () { $("#img_01").imageLens(); $("#img_02").imageLens({ lensSize: 200 }); $("#img_03").imageLens({ imageSrc: "images/sample01.jpg" }); $(&

jquery图片预览放大效果

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/ 1999/xhtml"> <head> <meta http-equiv="cont

JS实例教程:制作图片放大特效

效果: 运行代码框<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

jquery图片滚动放大代码分享(2)_jquery

本文实例讲述了jquery图片滚动放大效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现图片滚动放大效果代码,像是一个放大镜,适合用于产品展示,便于用户浏览产品细节,是一款非常实用的特效代码. 运行效果图:                 -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片滚动放大效果代码如下 <head> <meta http-eq

jquery图片滚动放大代码分享(1)_jquery

本文实例讲述了jquery图片滚动放大效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现图片滚动放大效果代码,带有左右箭头,适合用于产品展示,便于用户浏览产品细节,是一款非常实用的特效代码. 运行效果图:        ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片滚动放大效果代码如下 <head> <meta http-

jQuery实现带动画效果的二级下拉导航方法

 这篇文章主要介绍了jQuery实现带动画效果的二级下拉导航方法,涉及jQuery操作css样式及鼠标事件的技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了jQuery实现带动画效果的二级下拉导航方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x