// 设定时间,页面慢慢变透明,直到消失
var opacityInterval = setInterval(function () {
// 普通时间转为格林威治时间
var targetDate = new Date('2019-05-23 17:20:00')
var currentDate = new Date()
// 目标时间距1970年毫秒数
var time1 = targetDate.getTime()
// 当前时间距1970年毫秒数
var time2 = currentDate.getTime()
// 剩余时间毫秒数
var times = time1 - time2
// 设定timeMsec值, 让 times/timeMsec 的比值小于等于1, 也就是opacity的取值范围
var timeMsec = ''
// 剩余时间少于1小时, 就以一小时为单位, 当然你也可以设置单位为一天、一周、半个月、或半年, 相应改下 targetDate值
if (times < * * ) {
timeMsec = * *
}
// 计算出均匀透明度
var opacityRate = (times / timeMsec).toFixed()
if (times > ) {
document.getElementsByTagName("body")[].style.opacity = opacityRate
} else {
// 剩余时间为0, 设置opacityRate为0, 并清除定时器
opacityRate =
clearInterval(opacityInterval)
}
}, 3)

在github上面看到的 ,代码挺简单的,但是效果还可以,大家可以试试,挺有意思的。

顺便分享一个JS+CSS3 让图片爆炸的效果   源地址  :https://github.com/chokcoco/boomJS

Usage

 <!-- style -->
<link rel="stylesheet" type="text/css" href="Boom.css" />
<!-- scripts -->
<script src="jquery.js"></script>
<!-- scripts -->
<script src="boom.js"></script> <script>
// 调用方法:
//法一:传入图片的 jQuery 对象
boom($('img')) // 法二:构建 boom 实例,传入图片的 jQuery 对象
var bom = boom();
bom.boom($('img'));
</script>

API

 boom($('img'),{
// 缩放值
'scaleLevel' : ,
// 模糊值
'blurLevel': ,
// 弹射距离
'boomLevel': ,
// 爆炸时长
'boomTime':,
// 是否打开日志
'isOpenLog':true
});

温馨提示,不建议将 scaleLevel 的值设太高 :) 。

IOS 下的效果

UIViewXXYBoom

之前在 IOS 上面看到了一个这样的效果,寻思着能否用 Javascript 实现一遍,捣鼓了一番做出了如上图所示效果,因为是非 canvas ,无法取到图片上的色值,使用了背景图定位代替,所以性能方面可能有所不足。

页面渐进式消失【JS代码】的更多相关文章

  1. 怎样确保页面中的js代码一定是在DOM结构生成之后再调用

    有这样一类问题, 如下所示, 就是在dom结构没有生成时就在js代码中调用了, 此时就会报错: <head> <script> console.log(document.bod ...

  2. 刷新页面后,让控制台的js代码继续执行

    在各种限时,秒杀活动中,有个自动循环的点击的工具是很重要的. 为了方便起见,我们把Js代码放在浏览器的控制台执行,但是刷新页面后,js代码就清空了,也就无法执行. 可以用js代码实现一个不受页面刷新影 ...

  3. thinkphp在前端页面的js代码中可以使用 U方法吗? 可以使用模板变量如__URL__等吗?

    thinkphp在前端页面的js代码中可以使用 U方法吗? : 可以的! tp的U方法, 是"全局的", 什么是全局的? 就是, 可以在 "任何地方"使用的: ...

  4. JS代码指导原则

    一.什么是平稳退化? 如果含有JS代码的网页在用户浏览器不支持JS(或者禁用JS)时,用户仍然能够顺利浏览(网站功能正常,只是视觉效果可能差一些),那么这个网页就能够平稳退化 网页能够平稳退化是很必要 ...

  5. QQ空间自动点赞js代码

    1.jQuery().each(): each() 方法为每个匹配元素规定要运行的函数. 提示:返回 false 可用于及早停止循环. 函数原型: function(index,element) 为每 ...

  6. requirejs 多页面,多js 打包代码,requirejs多对多打包【收藏】

    这段代码来自 http://stackoverflow.com/questions/20583812/grunt-requirejs-optimizer-for-a-multi-app-project ...

  7. js页面跳转参考代码大全

    整理一下JS页面跳转参考代码 第一种:     <script language=/"javascript/" type=/"text/javascript/&qu ...

  8. js禁止页面复制 禁用页面右键菜单的代码

    js实现禁止页面复制功能.禁用页面右键菜单等功能.  <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制 ...

  9. 如何在一个网站或者一个页面,去书写你的JS代码

    // JavaScript Document //如何在一个网站或者一个页面,去书写你的JS代码: //1.js的分层(功能) : jquery(tools) 组件(ui) 应用(app), mvc( ...

随机推荐

  1. HDU - 2044 - 一只小蜜蜂...(dp)

    题意: 如题 思路: 仔细观察图 1-4和3-6其实是一样的答案,那么所有的方案都可以相减,意思为全部转化为从1开始 剩下的就是观察规律,仔细观察5号,能到5号蜂房的只有3和4,3和4到5号蜂房只有一 ...

  2. WIndows 系统下的常用命令 和 检测方法

    ### 一.检测硬盘速度(Windows 自带工具) #### 使用windows 系统自带的工具测试硬盘读写速度 > 在使用下面命令前,需要获得管理员权限,才会在Dos窗口上显示(否则,一闪而 ...

  3. unity问题笔记

    拖放在预制体中的图片等资源,他们的加载需要我们控制吗?我觉得不需要控制,但是如果按照现在的这种方式保存资源到非标准的resources文件下,那怎么加载?ulua的规则是这样查找资源的吗?猜想:客户端 ...

  4. Python面向对象一些阶段性总结

    什么时候用面向对象??? 1.共同的方法,提出来.共同的方法可以产生一个连接,其他方法可以使用,例如传文件,和执行命令都需要建立连接,关闭连接 例如 获取连接,...操作..关闭连接 2.创建模板.造 ...

  5. 省市区json结构

    [ { "label": "北京市", "value": "北京市", "children": [ ...

  6. Python 实现批量查询IP并解析为归属地

    一.背景: 最近工作中做了一个小功能,目的是为了分析注册用户区域分布和订单的区域分布情况.所以需要将其对应的IP信息解析为归属地,并同步每天同步更新.线上跑起来效率还是有优化的空间,优化的方向:在调用 ...

  7. Python学习笔记 (2.2)Python中的字符编码问题及标准数据类型之String(字符串)

    Python3中的String类型 首先,Python中没有字符类型,只有字符串类型.单个字符按照长度为1的字符串处理,这对于曾是OIER的我来说有点不适应啊. 字符串的表示方法 最常用的就是用一对双 ...

  8. POJ 1811 大整数素数判断 Miller_Rabin

    #include <cstdio> #include <cstring> #include <cmath> #include <ctime> #incl ...

  9. C++ - new delete 高维数组小结

    借鉴:http://www.cnblogs.com/beyondstorm/archive/2008/08/26/1276278.html http://www.cnblogs.com/platero ...

  10. codevs1004 四子连棋

    题目描述 Description 在一个4*4的棋盘上摆放了14颗棋子,其中有7颗白色棋子,7颗黑色棋子,有两个空白地带,任何一颗黑白棋子都可以向上下左右四个方向移动到相邻的空格,这叫行棋一步,黑白双 ...