jQuery炫酷点击变形全屏放大的模态窗口
这是一款效果非常炫酷的点击变形全屏放大的jQuery模态窗口插件。该模态窗口插件当用户点击某个按钮时,按钮先变形缩小变为圆形,然后在由小圆到大圆全屏放大,效果非常酷。
HTML结构
该模态窗口的HTML结构非常简单:使用 .cd-section 作为wrapper,.cd-modal-action是用于触发模态窗口的按钮,.cd-modal是模态窗口。.cd-modal-bg用于制作模态窗口的背景,模态窗口中的内容被包裹在 .cd-modal-content中。
<section class="cd-section"> <!-- section content here --> <div class="cd-modal-action"> <a href="#0" class="btn" data-type="modal-trigger">Fire Modal Window</a> <span class="cd-modal-bg"></span> </div> <div class="cd-modal"> <div class="cd-modal-content"> <!-- modal content here --> </div> </div> <a href="#0" class="cd-modal-close">Close</a></section>
CSS样式
该模态窗口插件使用.cd-modal-bg来制作模态窗口的背景:开始的时候它是absolute定位,放置在.btn按钮的恩下吧,并用visibility: hidden来隐藏它。
当用户点击了按钮,.btn按钮变形为一个圆形(使用.to-circle class),这时.cd-modal-bg变为可见状态,并开始增大覆盖整个窗口。缩放值依赖于窗口的大小,这个值使用js来获取。
在增长动画结束时,模态窗口变为可见(通过.modal-is-visible class),模态窗口中的内容被显示出来。
事件处理
该模态窗口插件中使用jQuery来获取那些CSS不能获取的值:.cd-modal-bg背景的缩放值和它的左边和上边的位置。
例如下面的代码是如何获取背景的缩放值:
via:http://www.htmleaf.com/jQuery/Lightbox-Dialog/201501291296.html
查看演示
jQuery炫酷点击变形全屏放大的模态窗口.zip
HTML结构
该模态窗口的HTML结构非常简单:使用 .cd-section 作为wrapper,.cd-modal-action是用于触发模态窗口的按钮,.cd-modal是模态窗口。.cd-modal-bg用于制作模态窗口的背景,模态窗口中的内容被包裹在 .cd-modal-content中。
<section class="cd-section"> <!-- section content here --> <div class="cd-modal-action"> <a href="#0" class="btn" data-type="modal-trigger">Fire Modal Window</a> <span class="cd-modal-bg"></span> </div> <div class="cd-modal"> <div class="cd-modal-content"> <!-- modal content here --> </div> </div> <a href="#0" class="cd-modal-close">Close</a></section>
CSS样式
该模态窗口插件使用.cd-modal-bg来制作模态窗口的背景:开始的时候它是absolute定位,放置在.btn按钮的恩下吧,并用visibility: hidden来隐藏它。
当用户点击了按钮,.btn按钮变形为一个圆形(使用.to-circle class),这时.cd-modal-bg变为可见状态,并开始增大覆盖整个窗口。缩放值依赖于窗口的大小,这个值使用js来获取。
- .cd-modal-action {
- position: relative;
- }
- .cd-modal-action .btn {
- width: 12.5em;
- height: 4em;
- background-color: #123758;
- border-radius: 5em;
- transition: color 0.2s 0.3s, width 0.3s 0s;
- }
- .cd-modal-action .btn.to-circle {
- width: 4em;
- color: transparent;
- transition: color 0.2s 0s, width 0.3s 0.2s;
- }
- .cd-modal-action .cd-modal-bg {
- position: absolute;
- top: 0;
- left: 50%;
- transform: translateX(-2em);
- width: 4em;
- height: 4em;
- background-color: #123758;
- border-radius: 50%;
- opacity: 0;
- visibility: hidden;
- transition: visibility 0s 0.5s;
- }
- .cd-modal-action .cd-modal-bg.is-visible {
- opacity: 1;
- visibility: visible;
- }
在增长动画结束时,模态窗口变为可见(通过.modal-is-visible class),模态窗口中的内容被显示出来。
事件处理
该模态窗口插件中使用jQuery来获取那些CSS不能获取的值:.cd-modal-bg背景的缩放值和它的左边和上边的位置。
例如下面的代码是如何获取背景的缩放值:
- var btnRadius = $('.cd-modal-bg').width()/2,
- left = $('.cd-modal-bg').offset().left + btnRadius,
- top = $('.cd-modal-bg').offset().top + btnRadius - $(window).scrollTop(),
- scale = scaleValue(top, left, btnRadius, $(window).height(), $(window).width());
-
- function scaleValue( topValue, leftValue, radiusValue, windowW, windowH) {
- var maxDistHor = ( leftValue > windowW/2) ? leftValue : (windowW - leftValue),
- maxDistVert = ( topValue > windowH/2) ? topValue : (windowH - topValue);
- return Math.ceil(Math.sqrt( Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2) )/radiusValue);
- }
via:http://www.htmleaf.com/jQuery/Lightbox-Dialog/201501291296.html
【jQuery炫酷点击变形全屏放大的模态窗口】相关文章
4. jQuery 关于点击菜单项,使子条目“向上”展开效果的实现
5. 令人印象深刻的 jQuery 模态框插件 – iLightBox
6. 令人印象深刻的 jQuery 模态框插件 – iLightBox
7. Switch To HTML5:一个基础而实用的模板生成工具
8. Html5 Canvas 变换矩阵与坐标变形之间的关系
本文来源:https://www.51html5.com/a1482.html
上一篇:jQuery饼状图表数据分布插件
下一篇:jQuery实现苹果Dock样式的菜单
﹝jQuery炫酷点击变形全屏放大的模态窗口﹞相关内容
- jQuery图片放大预览插件
- 谷歌地图拟开始向企业收费 1000次点击4美元
- 强大的响应jQuery滑块插件LayerSlider
- 强大的响应jQuery滑块插件LayerSlider
- 7款炫酷实用 jQuery/HTML5图片应用
- 炫酷霸气的HTML5/jQuery应用及源码
- 7个炫酷的jQuery动画插件及源码
- jQuery/CSS3 3D焦点图动画 多种炫酷图片切换特效
- jquery全屏背景插件bgStretcher
- HTML5的音频和JQUERY的全屏幻灯片