Javascript特效：利用封装动画函数模拟关闭安全管家弹窗

知识点

引入封装好的工具库myTools.js。
绝对定位，子绝父相，父盒子不一定非要是相对定位，只要有定位就可以。
background: transparent;透明

运行效果

点击×后关闭

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}#box{position: fixed;right: 0;bottom: 0;}img{vertical-align: top;}span{width: 25px;height: 25px;background: transparent;position: absolute;right: 0;top: 0;cursor: pointer;}</style>
</head>
<body><div id="box"><span id="close"></span><div id="top"><img src="data:images/top.jpg" alt=""></div><div id="bottom"><img src="data:images/bottom.jpg" alt=""></div></div><script src="../00MyTools/MyTools.js"></script><script>window.addEventListener('load',function (ev) {myTool.$('close').addEventListener('click', function () {myTool.slowMoving(myTool.$('bottom'), {'height': 0}, function () {myTool.slowMoving(myTool.$('box'), {'width': 0}, function () {myTool.$('close').style.display = 'none';})})});})</script>
</body>
</html>

Javascript特效：利用封装动画函数模拟关闭安全管家弹窗相关推荐

javascript中BOM介绍、屏幕尺寸、历史记录、URL解析、计算机信息获取、定时器、三大系列及兼容代码、封装动画函数、同步和异步
BOM介绍: BOM指的是浏览器对象模型,是用来操作浏览器的,例如浏览器弹窗.地址栏.滚动条等,浏览器顶级对象:window:页面中的所有内容都是属于window的,window可以省略:confir ...
JS原生封装动画函数
封装一个简单的原生匀速动画函数 /*** 匀速动画函数* @param {位移的元素} elm * @param {位移的目标位置} target */ function moveAnimation( ...
PC端网页特效二：mouseenter 和 mouseover 的区别、动画函数封装
目录 5.mouseenter 和 mouseover 的区别 6.动画函数封装动画实现原理简单动画函数封装动画函数给不同元素记录不同定时器缓动效果原理动画函数多个目标值之间移动缓动函 ...
嵌入式学习DAY10 --- 封装子函数，GDB调试，gcc编译流程
嵌入式入门学习笔记,遇到的问题以及心得体会! DAY10 概述: 今日内容不多,C语言大致运用内容完结,后续还有未讲解到的会再讲. 1.封装子函数 2.GDB调试 3.gcc编译流程笔记: 1,ma ...
JavaScript 之网页特效篇（offset系列、client系列、scroll系列、动画函数封装、常见网页特效）
网页特效 1.元素偏移量 offset 系列 offset 翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置可以获取 ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
28 - JavaScript 特效：scroll家族和缓动动画
缓动动画三个函数缓慢动画里,我们要用到三个函数,这里先列出来: Math.ceil() 向上取整 Math.floor() 向下取整 Math.round(); 四舍五入缓动动画的原理缓动动画 ...
用缓动函数模拟物理动画
1.缓动函数简介 <1>缓动函数的动画效果是建立在CALayer层级的关键帧动画基础之上也就是说用普通的UIView的Animation是无法直接实现缓动函数 <2>缓动函数 ...
Javascript特效之模拟抽奖程序
Javascript特效之模拟抽奖程序我们经常会看到一些抽奖程序,应该很多都是H5做的,今天我们来看看js怎么实现类似抽奖的程序. 效果图: 点击开始时,会一直跳动文本框的值直到我们点击停止.就类似 ...
指针||指针和数组||指针和函数||指针、数组、函数案例描述：封装一个函数，利用冒泡排序，实现对整型数组的升序排序
指针指针的基本概念指针的作用: 可以通过指针间接访问内存内存编号是从0开始记录的,一般用十六进制数字表示可以利用指针变量保存地址指针变量的定义和使用指针变量定义语法: 数据类型 * 变量名 ...

Javascript特效：利用封装动画函数模拟关闭安全管家弹窗

知识点

运行效果

代码

Javascript特效：利用封装动画函数模拟关闭安全管家弹窗相关推荐

最新文章

热门文章