页面加载完毕相关信息淡入效果
前言:
年关将至,公司一部分同事已经回老家了,虽然过年不回去,但想到明天上完班就放假了内心多少有点激动。工作上的事情不要紧的已经没心情再看了,加之今天领导不在 哈哈哈... 搞点自己的爱好!
看bootstrap的优站精选时看到了一个页面加载完毕时的一个淡入效果(http://www.mikeinghamdesign.com/),于是...
效果图:
实现思路:
此处实现主要用外边距margin-top属性和透明度opacity属性;
1.淡入区块初始设置一定上外边距,透明度完全透明;
2.页面加载完毕利用jquery的animate动画函数动态减去一定上外边距,透明给完全不透明,此处我设置执行时间为1s(先执行第一个淡入的区块,成功显示后,回调执行第二个要显示的区块);
源码:
<!DOCTYPE html><html> <head><meta name="viewport" content="width=device-width" /><title>Mike_Index</title><style>*{margin:0;padding:0;font-family:'Microsoft YaHei';}a{text-decoration:none;}li{list-style:none;}body {background-color: #1B244B;}.content {height:700px;}.content {overflow:hidden; background-image:url('../Images/mike/heroshot.jpg');background-repeat:no-repeat;background-size:cover;background-position:center center;}.content .opreation{width:500px;margin:260px auto 0 auto;color:#fff;letter-spacing:5px;text-align:center;}.content .opreation .title{letter-spacing:8px;font-size:42px;font-weight:normal;}.content .opreation .text-wrap,.content .opreation button{ margin-top:35px;opacity:0;}.content .opreation .text{letter-spacing:3px;margin-top:5px;}.content .opreation .line{display:block;margin:10px auto 70px auto; width:60px;height:2px;background-color:#0093cb;}.content .opreation button{height:65px;width:210px;line-height:65px;color:#fff;font-size:15px;letter-spacing:3px; background-color:transparent;border:1px solid #fff;border-radius:5px;cursor:pointer; transition:border-color 0.4s linear;}.content .opreation button:hover{border-color:#0093cb;}</style><script src="~/Scripts/jquery-1.8.2.js"></script><script>$(function () {txtBtnFadeIn();});var txtBtnFadeIn = function () {var $txt = $('.content .opreation .text-wrap');var $btn = $('.content .opreation button');setTimeout(function () {var animate_para = { 'margin-top': 0, 'opacity': 1 };$txt.animate(animate_para, 1000, 'linear', function () {$btn.animate(animate_para, 1000);});}, 500);}</script> </head> <body><div class="content"><div class="opreation"><h1 class="title">MIKE INGHAM</h1><div class="text-wrap"><p class="text">WEB & GRAPHIC DESIGNER</p><span class="line"></span></div><button>GET IN TOUCH</button></div></div> </body> </html>
总结:
遇到问题:给子元素div设置margin-top时,发现子元素div没有距父元素div产生上边距,而是父元素div距整个页面产生了上边距;
问题原因:网上找资料且自己在火狐证实,得出结论:当两个嵌套的div如果父div与子div之间没有任何非空元素且父元素div没有上内边距且父元素没有上边框两个div会共享上外边距;
问题解决:通常做法 父元素加overflow:hidden;即可 ;其他做法 与上面产生原因对应解决即可
转载于:https://www.cnblogs.com/zmeng/p/5176964.html
页面加载完毕相关信息淡入效果相关推荐
- JS判断页面加载完毕
//JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果.document.onreadystatechange = function () {if (document.readyState ...
- 页面加载完毕执行多个JS函数
通常我们需要在打开页面时加载脚本,这些脚本必须在页面加载完毕后才可以执行,因为这时候DOM才完整,可以利用window.onload确保这一点,如: window.οnlοad=firstFuncti ...
- jQuery的页面加载完毕事件?
很多时候我们需要获取元素,但是必须等到该元素被加载完成后才能获取.我们可以把js代码放到该元素的后面,但是这样就会造成js在我们的body中存在不好管理.所有页面加载完毕后所有的元素当然已经加载完毕. ...
- 页面加载完毕_【前端面试】dom 的解析,加载,渲染
本文会把 dom 的解析,加载,渲染结合 window.performance 一起讲. dom 的解析 解析:HTMl 解析器把 HTML 构建成 HTML 树形数据结构,也就是 DOM 树. 注意 ...
- python能做页面加载动画吗_HTML+CSS实现页面加载(loading)动画效果
大家在浏览页面时有没有遇到页面正在loading(加载)的情况,那作为一个前端开发人员,你知道如何用CSS3和HTML制作页面加载动画效果吗?这篇文章就和大家分享一个超级简单实用的CSS3 圆圈加载( ...
- 两种方法实现在HTML页面加载完毕后运行某个js
Js方法: <script type="text/javascript">window.onload=function (){var userName="xi ...
- loading页面加载(等待页面加载完毕再隐藏loading页面)
1.设计一个装载Loading页面的div 此处设置的height为100vh,vh单位表示浏览器的可视高度百分比,100vh表示浏览器高度的100%,如果是全屏Loading,则该div需要排在bo ...
- uni 页面加载完毕_uniapp小程序如何等待数据回来才加载页面?
在app.vue中onLaunch请求, 但是要等待数据回来才加载页面, 这个如何控制, 比如: vue 可以在上级路由加v-if 请求完成判断, 但是uni-app 这种如何控制呢? vue 代码如 ...
- uni 页面加载完毕_uni-app图片未加载完处理
实现效果 1.图片未加载完看到的是 .new-img占位背景图片,.new_back透明度设置0; 2.图片加载失败显示设置的 loadImg 失败占位图片 3.图片加载完直接显示完整图片同时添加类名 ...
最新文章
- RxJava 和 RxAndroid 三(生命周期控制和内存优化)
- 如何使用通用Mapper
- 随机文件处理函数应用
- Log4j、slf4j
- 从计算机知识到落地能力,你欠缺了什么?
- angular ui组件_使用Angular Material将现代UI组件添加到Angular项目中
- fckeditor异常总结---WARN No appenders could be found for logger的解决方法
- 410.分割数组的最大值
- BAT[阿里、百度、腾讯]等互联网公司数据结构面试题(一) python分析实现
- 简体,繁体中文互转类
- 服务器tcpip修复工具,tcpip协议修复工具winsockfix
- 手机数控模拟器安卓版_数控模拟器手机版下载-数控模拟器安卓手机版v1.1.4-河东软件园...
- 中国环境检测市场运营现状分析与投资规划研究报告2022年版
- nginx企业级优化
- ffmpeg批量将图片合并为视频
- 电源适配器的主要质量指标
- python-合并两个列表并去重
- 网络安全面试题目及详解
- Linux C 指针
- ubuntu+cuda+theano