学习webAP第七天

client可视区域
clientWidth: 可视区域的宽度(没有边框)
clientHeight: 可视区域的高度(没有边框)
clientLeft: 左边边框的宽度
clientTop: 上边边框的宽度
clientX: 离窗口左边的距离
clientY: 离窗口上边的距离
event事件: 谷歌和火狐支持
window.event: 谷歌和ie8支持
document.onmousemove: 都支持

变速动画之增加任意多个属性和回调函数和透明度和层级
代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}#btn {position: absolute;top: 0;left: 0;}#dv {width: 100px;height: 100px;background-color: gold;position: absolute;top: 30px;}</style>
</head>
<body>
<input type="button" id="btn" value="点击">
<div id="dv"></div>
<script src="../common.js"></script>
<script>function getStyle(element, attr) {return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];}function animate(element, json, fn) {clearInterval(element.timeId)element.timeId = setInterval(function () {var flag = truefor (var attr in json) {if (attr == "opacity") {var current = parseInt(getStyle(element, attr)*100);var target = json[attr]*100;var setp = (target - current) / 10;setp = setp > 0 ? Math.ceil(setp) : Math.floor(setp);current += setp;element.style[attr] = current/100;} else if (attr == "zIndex") {element.style[attr] = json[attr]} else {var current = parseInt(getStyle(element, attr));var target = json[attr];var setp = (target - current) / 10;setp = setp > 0 ? Math.ceil(setp) : Math.floor(setp);current += setp;element.style[attr] = current + "px";}if (current != target){flag = false}}if (flag){clearInterval(element.timeId)if (fn){fn();}}}, 20)}my$("btn").onclick = function () {animate(my$("dv"), {"width": 400, "height": 500, "left": 300, "top": 100,"opacity":0.2,"zIndex":-1}, function () {animate(my$("dv"), {"width": 200, "height": 200, "left": 0, "top": 0,"opacity":0.6,"zIndex":-1})});}
</script>
</body>
</html>

学习webAP第七天相关推荐

【Silverlight】Bing Maps学习系列（七）：使用Bing Maps的图片系统（Tile System）
[Silverlight]Bing Maps学习系列(七):使用Bing Maps的图片系统(Tile System) 目前包括微软必应地图在内的几乎所有在线电子地图(如:Google Maps等)都 ...
七天入门linux,RHCE认证学习笔记-第七天
RHCE认证学习笔记-第七天 1.系统启动过程: BIOS初始化-->引导程序(Bootloader)-->内核初始化-->进程(Init)-->用户程序 (1)BIOS初始化 ...
Intel VT学习笔记（七）—— EPT物理地址转换
Intel VT学习笔记(七)-- EPT物理地址转换要点回顾 EPT 支持检测 9-9-9-9-12分页实验:EPT物理地址转换参考资料要点回顾在上一篇中,已经初步实现了最小VT框架,但实 ...
软件调试学习笔记（七）—— 单步步入单步步过
软件调试学习笔记(七)-- 单步步入&单步步过单步步入设置单步异常处理单步异常实验1:单步异常的设置与处理单步步过实现思路实验2:实现单步步过单步步入描述: 单步步入的实现依 ...
Windows驱动开发学习笔记（七）—— 多核同步内核重载
Windows驱动开发学习笔记(七)-- 多核同步基础知识并发与同步分析 InterlockedIncrement 原子操作相关API 内核文件多核同步临界区示例一:错误的临界区示例二: ...
Windows进程与线程学习笔记（七）—— 时间片管理
Windows进程与线程学习笔记(七)-- 时间片管理要点回顾基本概念 CPU时间片分析 KeUpdateRunTime 分析 KiDispatchInterrupt 备用线程总结要点回顾 ...
Windows保护模式学习笔记（七）—— PDEPTE
Windows保护模式学习笔记(七)-- PDE&PTE Cr3 PDE(页目录表项) PTE(页表项) 物理页的属性 10-10-12分页的补充实验1:证明PTE的特征1 第一步:选择一个 ...
JavaScript学习笔记（七）——厚积薄发之小成果
JavaScript学习笔记(七)--厚积薄发之小成果目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/wdpp/archive ...
Mysql学习笔记（七）查(补充)
Mysql学习笔记(七)查(补充) 原文:Mysql学习笔记(七)查(补充) PS:五一还是要学习...虽然有点苦逼..但是路是自己选的,那么自己就要坚持的走下去... 学习内容: 1.数据库查找的补 ...

学习webAP第七天

学习webAP第七天相关推荐

最新文章

热门文章