jQuery项目--ES6入门教程网站
来源:互联网 发布:淘宝网舞蹈服饰 编辑:程序博客网 时间:2024/05/29 08:39
项目的预览图
PC浏览器
手机浏览器
DIV居中
给父元素设置相对定位,就可以这样写子元素的样式来使其居中:
div { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
使用transform: translate(-50%, -50%);
即使宽高不固定也能实现垂直水平居中。
蒙层弹窗的实现
HTML结构:
<div id="wrap"> <div id="recomment"> <div>博客推荐</div> <div> <pre> 本文主要参考了阮一峰的的出版书籍(第一版),作者已经出版了第二版书籍。且本文所摘抄的内容大多只是基本用法,适合了解,如果想要深入学习,建议查看作者的博客。 点击下方按钮即可前往,<span id="time">4</span> 秒后本弹窗自动关闭。 </pre> </div> <a href="http://es6.ruanyifeng.com" target="_blank" id="lA">立即前往</a> <a href="####" id="rA">留在本站</a> </div> </div>
CSS样式:
#wrap { display: none; height: 100vh; position: relative; top: 0; left: 0; right:0; background-color: #777;}#recomment { width: 400px; height: 270px; border: 1px solid #eee; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
JS部分:
//博客推荐弹窗的自动消失//时间显示$('#wrap').slideDown(200);var time = setInterval(function () { $('#time').html(parseInt($('#time').html()) - 1); },1000);setTimeout(function () { //去除计时器 clearInterval(time); $('#wrap').slideUp(400); setTimeout(function () { $('#wrap').remove(); }, 400); },4000);// 留在本站$('#rA').click(function () { $('#wrap').remove();});
结束语
到此为止,核心的部分就总结完了。点击下方地址就可以看这次的demo哦。
点我点我
0 0
- jQuery项目--ES6入门教程网站
- ES6 项目
- es6教程,ECMAScript 6入门教程
- ES6编译器—Babel 入门教程
- jQuery 入门教程
- 收藏ES6相关网站
- 学习es6的网站
- ES6项目构建
- ES6构建彩票项目
- es6项目构建01
- 从零开始学jQuery,jQuery入门教程
- jQuery入门教程之-hello Jquery
- JQuery中文入门教程
- jQuery Mobile 经典入门教程
- jQuery Mobile 入门教程
- jQuery中文入门教程
- jQuery 入门教程(1): 概述
- jQuery 入门教程(3): Selectors
- linux安装JDK:bash: ./java: /lib/ld-linux.so.2: bad ELF interpreter: 没有那个文件或目录
- 8位16位32位数据的拆分与合并程序
- 1094. The Largest Generation (25)
- Linux基本命令操作(一)
- C++最大公约数和最小公倍数
- jQuery项目--ES6入门教程网站
- 雅虎网站性能优化的34条黄金规则
- 关于nginx造成大量TIME_WAIT导致web项目无法访问
- struct和typedef struct
- CentOS 图形界面的关闭与开启
- FreeMarker语法知识
- hibernate主配置文件
- ViewPager无限自动轮播小圆点+网络加载图片+活动倒计时
- [bzoj1500] 维修数列