jQuery炫酷点击变形全屏放大的模态窗口

这是一款效果非常炫酷的点击变形全屏放大的jQuery模态窗口插件。该模态窗口插件当用户点击某个按钮时,按钮先变形缩小变为圆形,然后在由小圆到大圆全屏放大,效果非常酷。

最后在生成模态窗口的时候的动画效果使用jqueryVelocity以及CSS3
transition 和 transformations共同完成。

在线演示:http://www.htmleaf.com/Demo/201501291297.html

下载地址:http://www.htmleaf.com/jQuery/Lightbox-Dialog/201501291296.html

时间: 2024-11-07 03:40:32

jQuery炫酷点击变形全屏放大的模态窗口的相关文章

手机端 — 点击图片全屏查看

在公众号中提交服务需求工单后,经过"待分配"."待执行"."执行中"."待验收" 这些阶段后,需要验收人提交评论上传图片才能变成"已完成". 做好后新增点击图片全屏查看的需求,刚开始使用的方法能够做到,但是由于 jquery 的版本冲突,所以不得已换了现在的方法. <div class="add_photo" style="margin-top: 1000px;"

CSS3和js炫酷点击按钮3D翻转动画特效

简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览   源码下载 使用方法 使用该按钮过渡动画特效需要引入它提供的按钮样式表style.css和用于触发按钮点击事件的js文件script.js. HTML结构 该点击按钮过渡动画特效使用一个嵌套div的HTML结构: <div class="btn"> <div class="

jQuery炫酷插入和移动元素动画特效插件

Magic Move是一款效果非常棒的jQuery炫酷插入和移动元素动画特效插件.这款插件可以以非常平滑的方式在指定元素之前插入其它元素,并且当最右边的元素超出容器时会自动下移插入到下一行的第一个位置. 在线演示:http://www.htmleaf.com/Demo/201503061473.html 下载地址:http://www.htmleaf.com/jQuery/Layout-Interface/201503061472.html

点击按钮全屏,按esc退出全屏

需求:点击按钮让页面全屏,并且菜单导航栏隐藏,content宽度100%:按esc键退出全屏,菜单导航栏显示: 问题:按esc退出全屏无法监听到键盘按下事件,(兼容性问题,监听是否全屏状态,火狐监听不起作用): 解决思路:监听页面浏览器大小,判断页面的实际高度是否等于浏览器的分辨率的高度: 注意事项:必须要把body的高度设置为100%:margin为0:padding为0:否则页面的实际高度不等于浏览器的分辨率的高度: *************************************

微信上 网页图片点击全屏放大

实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来.这个代码在网上搜一下,挺多类似的. 先上代码. function arrayToJson(o) { var r = []; if (typeof o == "string") return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\

jQuery炫酷3d旋转木马特效插件

这是一款使用TweenMax.js制作的jQuery超酷3D旋转木马特效.该旋转木马特效可以感应鼠标的位置而使旋转木马做出相应的变化,效果非常炫酷. 在线演示:http://www.htmleaf.com/Demo/201502231410.html 下载地址:http://www.htmleaf.com/jQuery/Slideshow-Scroller/201502231409.html

jQuery炫酷3d背景视觉差特效

Smart3D是一款效果非常炫酷的jQuery图片背景视觉差特效插件.该插件将图片以层的形式排放,当鼠标滑过图片的时候,每一层的图片的运动速度各不相同,从而形成强烈的视觉差效果. 效果演示:http://www.htmleaf.com/Demo/201504051628.html 下载地址:http://www.htmleaf.com/jQuery/shijuecha/201504051627.html

jQuery炫酷3D旋转幻灯片特效插件

iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效. 这款幻灯片插件的特点有: 高度灵活和可定制性. 灵活的用户界面的设计. 在单个HTML页面中允许存在多个实例. 可以定制每一个slider的easing效果. 多语言支持. 可以在 iOS 和 Android 上正常工作. 可以选择自动播放模式下鼠标悬停时停止播放幻灯片. 非常容易调整尺寸. 兼容外部字体(如谷歌字体). 有预加载进度条显示.

jquery简单的大背景banner图片全屏切换

详细内容请点击 这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟.个人网站上线不久,最近整理整理从前的一些小逼格的事 大背景全屏切换效果图:    大背景全屏切换效果html内容: <!--banner图片切换开始--><div class="banner"> <div class="block none">