页面渐进式消失【JS代码】
// 设定时间,页面慢慢变透明,直到消失
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 下的效果
之前在 IOS 上面看到了一个这样的效果,寻思着能否用 Javascript 实现一遍,捣鼓了一番做出了如上图所示效果,因为是非 canvas ,无法取到图片上的色值,使用了背景图定位代替,所以性能方面可能有所不足。
页面渐进式消失【JS代码】的更多相关文章
- 怎样确保页面中的js代码一定是在DOM结构生成之后再调用
有这样一类问题, 如下所示, 就是在dom结构没有生成时就在js代码中调用了, 此时就会报错: <head> <script> console.log(document.bod ...
- 刷新页面后,让控制台的js代码继续执行
在各种限时,秒杀活动中,有个自动循环的点击的工具是很重要的. 为了方便起见,我们把Js代码放在浏览器的控制台执行,但是刷新页面后,js代码就清空了,也就无法执行. 可以用js代码实现一个不受页面刷新影 ...
- thinkphp在前端页面的js代码中可以使用 U方法吗? 可以使用模板变量如__URL__等吗?
thinkphp在前端页面的js代码中可以使用 U方法吗? : 可以的! tp的U方法, 是"全局的", 什么是全局的? 就是, 可以在 "任何地方"使用的: ...
- JS代码指导原则
一.什么是平稳退化? 如果含有JS代码的网页在用户浏览器不支持JS(或者禁用JS)时,用户仍然能够顺利浏览(网站功能正常,只是视觉效果可能差一些),那么这个网页就能够平稳退化 网页能够平稳退化是很必要 ...
- QQ空间自动点赞js代码
1.jQuery().each(): each() 方法为每个匹配元素规定要运行的函数. 提示:返回 false 可用于及早停止循环. 函数原型: function(index,element) 为每 ...
- requirejs 多页面,多js 打包代码,requirejs多对多打包【收藏】
这段代码来自 http://stackoverflow.com/questions/20583812/grunt-requirejs-optimizer-for-a-multi-app-project ...
- js页面跳转参考代码大全
整理一下JS页面跳转参考代码 第一种: <script language=/"javascript/" type=/"text/javascript/&qu ...
- js禁止页面复制 禁用页面右键菜单的代码
js实现禁止页面复制功能.禁用页面右键菜单等功能. <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制 ...
- 如何在一个网站或者一个页面,去书写你的JS代码
// JavaScript Document //如何在一个网站或者一个页面,去书写你的JS代码: //1.js的分层(功能) : jquery(tools) 组件(ui) 应用(app), mvc( ...
随机推荐
- Centos7二进制文件安装MySQL5.7.25
1.删除centos系统自带的mariadb数据库防止发生冲突 rpm -qa|grep mariadb rpm -e mariadb-libs --nodeps 2.安装libaio库 yum -y ...
- 验证DNS解析失败:解决办法之一
今天晚上练习简单的DNS解析验证: 环境是在一台虚拟机上搭建,另一台虚拟机验证,步骤如下: 虚拟机A: 1.安装软件包 bind 和bind-chroot[root@svr7 ~]# yum -y ...
- C语言结构体用法
结构体的定义: 方法一: struct student { char name[10]; int age; int number; }; struct student stu1; 方法二: struc ...
- (一)python条件语句和基本数据类型
条件语句 语法一:if...else if <条件成立>: 处理过程 else: 处理过程 语法二:if...elif...else if <条件1成立>: 处理过程1 el ...
- react入门----基础语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【模板】Lca倍增法
Codevs 1036 商务旅行 #include<cstdio> #include<cmath> #include<algorithm> using namesp ...
- Vue2.0如何实现父组件与子组件之间的事件发射与接收
关于vue2.0的事件发射和接收,大家都知道$dispatch和$broadcast在vue2.0已经被弃用了,取而代之的是更加方便快捷的方式,使用事件中心,组件通过它来互相通信,不管组件在哪一个层都 ...
- 【Codeforces 600C】Make Palindrome
[链接] 我是链接,点我呀:) [题意] 题意 [题解] 计算出来每个字母出现的次数. 把字典序大的奇数出现次数的字母换成字典序小的奇数出现次数的字母贪心即可. 注意只有一个字母的情况 然后贪心地把字 ...
- 【Codeforces 992B】Nastya Studies Informatics
[链接] 我是链接,点我呀:) [题意] 题意 [题解] 因为gcd(a,b)=x 所以设a = nx b = mx 又有ab/gcd(a,b)=lcm(a,b)=y 则nmx = y 即n(m*x) ...
- Bugzilla 系统企业应用案例
目录 一. 概述: - 4 - 二. 目的 - 4 - 三. 执行原则 - 4 - 四. 管理办法 - 4 - 五. BUG处理流程图 - 5 - 六. 主要职责 - 6 - 七. 需求类问题处理 - ...