【06-23】js动画学习笔记01
<html>
<head>
<style>
* {
margin:0;
padding:0;
}
#div1{
width:200px;
height:200px;
background:red;
position:relative;
left:-200px;
top:0;
}
#div1 span{
width:20px;
height:50px;
background:skyblue;
position:absolute;
left:200px;
top:75px;
} #testOpacity{
margin-top:50px;
width:200px;
height:200px;
background:red;
filter:alpha(opacity:30);
opacity:0.3
} #bufferAction{
margin-top:50px;
width:200px;
height:200px;
background:red;
position:relative;
left:-200px;
top:0;
}
#bufferAction span{
width:20px;
height:50px;
background:skyblue;
position:absolute;
left:200px;
top:75px;
} </style>
<title>js动画test</title>
</head>
<body>
<div id="div1">
<span id="share">分享</span>
</div>
<script>
var div1=document.getElementById("div1");
div1.onmouseover=function(){
startMove(div1,10,0);
}
div1.onmouseleave=function(){
startMove(div1,-10,-200);
}
var timer=null;
/*使用offsetLeft实现滑动动画*/
function startMove(obj,speed,target){
clearInterval(timer);
timer=setInterval(function(){
if(obj.offsetLeft==target){
clearInterval(timer);
}else{
obj.style.left=obj.offsetLeft+speed+"px";
}
},30);
}
</script> <div id="testOpacity">
</div>
<script>
var opacityObj=document.getElementById("testOpacity");
opacityObj.onmouseover=function(){
changeOpacity(this,5,90);
}
opacityObj.onmouseleave=function(){
changeOpacity(this,5,10);
}
var opacityTimer=null;
/*使用opacity实现渐变*/
function changeOpacity(obj,speed,target){
clearInterval(opacityTimer);
var currentOpacity=obj.style.opacity*100;
opacityTimer=setInterval(function(){
if(target==currentOpacity){
clearInterval(opacityTimer);
}else{
if(target>currentOpacity){
speed=Math.abs(speed);
}else{
speed=-Math.abs(speed);
}
currentOpacity+=speed;
obj.style.opacity=currentOpacity/100;
obj.style.filter='alpha(opacity:'+currentOpacity+')';
}
},30);
}
</script> <div id="bufferAction">
<span id="bufferActionSpan">分享</span>
</div>
<script>
var opacityObj=document.getElementById("bufferAction");
opacityObj.onmouseover=function(){
bufferAction(this,10,0);
}
opacityObj.onmouseleave=function(){
bufferAction(this,10,-200);
}
var bufferTimer=null;
/*模拟渐进效果*/
function bufferAction(obj,speed,target){
clearInterval(bufferTimer);
speed=speed>0? Math.ceil(speed):Math.floor(speed);
bufferTimer=setInterval(function(){
if(target==obj.offsetLeft){
clearInterval(bufferTimer);
}else{
if(target>obj.offsetLeft){
speed=Math.ceil((target-obj.offsetLeft)/20);
}else{
speed=Math.floor((target-obj.offsetLeft)/20);
}
obj.style.left=obj.offsetLeft+speed+"px";
}
},30);
}
</script> </body> </html>
/*
offsetLeft和left的区别：
offsetLeft获取相对于父对象的左边距
left获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距 offsetLeft返回的数值，left返回的是带px的字符串
style.left是读写的，offsetLeft是只读的
*/
/*
css布局：
position:absolute相对于使用了position的父级元素，如果没有则以body为参照 relative相对定位，相对于原来的位置，但是原来的位置仍然保留
absolute定位，相对于最近的非标准定位，原来的位置消失，被后边的位置所顶替 只用absolute和relative定位多样的页面，真是漂亮。 */
/*
window.opener:
window.opener可以获取转到当前页面的父页面window对象，可以通过其调用父页面的所有对象和方法
博客园的tag跳转连接：
window.open('/tags/list?id=*****','_blank','width=300,height=500,toolbars=yes,resizable=yes,scrollbars=yes,left='+leftVal+',top='+topVal); 刷新当前页可以用：
window.location="javascript:document.location.reload()";
*/
【06-23】js动画学习笔记01的更多相关文章
- js动画学习笔记
<html> <head> <meta charest="utf-8"> <title>test</title> < ...
- JS数组学习笔记
原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...
- Redis：学习笔记-01
Redis:学习笔记-01 该部分内容,参考了 bilibili 上讲解 Redis 中,观看数最多的课程 Redis最新超详细版教程通俗易懂,来自 UP主 遇见狂神说 1. Redis入门 2.1 ...
- 软件测试之loadrunner学习笔记-01事务
loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...
- Android动画学习笔记-Android Animation
Android动画学习笔记-Android Animation 3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中 ...
- js再学习笔记
#js再学习笔记 ##基本 1.js严格区分大小写 2.js末尾的分号可加,也可不加 3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...
- Unity Shader序列帧动画学习笔记
Unity Shader序列帧动画学习笔记 关于无限播放序列帧动画的一点问题 在学shader的序列帧动画时,书上写了这样一段代码: fixed4 frag(v2f i){ // 获得整数时间 flo ...
- C++ GUI Qt4学习笔记01
C++ GUI Qt4学习笔记01 qtc++signalmakefile文档平台 这一章介绍了如何把基本的C++只是与Qt所提供的功能组合起来创建一些简单的图形用户界面应用程序. 引入两个重要概 ...
- SaToken学习笔记-01
SaToken学习笔记-01 SaToken版本为1.18 如果有排版方面的错误,请查看:传送门 springboot集成 根据官网步骤maven导入依赖 <dependency> < ...
随机推荐
- PhotoShop算法原理解析系列 - 风格化---》查找边缘。
之所以不写系列文章一.系列文章二这样的标题,是因为我不知道我能坚持多久.我知道我对事情的表达能力和语言的丰富性方面的天赋不高.而一段代码需要我去用心的把他从基本原理-->初步实现-->优化 ...
- 你不知道的Javascript（上卷）读书笔记之二 ---- 词法作用域
在前一篇文章中,我们把作用域定义为"管理.维护变量的一套规则",接下来是时候来深入讨论一下Js的作用域问题了,首先我们要知道作用域一般有两种主要的工作类型,一种是词法作用域,一种是 ...
- UVA11525 Permutation[康托展开 树状数组求第k小值]
UVA - 11525 Permutation 题意:输出1~n的所有排列,字典序大小第∑k1Si∗(K−i)!个 学了好多知识 1.康托展开 X=a[n]*(n-1)!+a[n-1]*(n-2)!+ ...
- 第一章 spring核心概念
一.Spring作用:管理项目中各种业务Bean(service类.Dao类.Action类),实例化类,属性赋值 二.Spring IOC(Inversion of Control )控制反转,也被 ...
- iOS通知
链接: IOS之推送通知(本地推送和远程推送) iOS 10推送通知开发 活久见的重构 - iOS 10 UserNotifications 框架解析 iOS10全新推送功能的实现
- iOS Run_time
Runtime是想要做好iOS开发,或者说是真正的深刻的掌握OC这门语言所必需理解的东西.最近在学习Runtime,有自己的一些心得,整理如下,一为 查阅方便二为 或许能给他人一些启发,三为 希望得到 ...
- PAT 1034. 有理数四则运算(20)
本题要求编写程序,计算2个有理数的和.差.积.商. 输入格式: 输入在一行中按照"a1/b1 a2/b2"的格式给出两个分数形式的有理数,其中分子和分母全是整型范围内的整数,负号只 ...
- 基于redis和docker的guestbook留言簿案例
在正式介绍之前,大家有必要先理解Kubernetes几个核心概念及其承担的功能.以下为Kubernetes的架构设计图: 1. Pods在Kubernetes系统中,调度的最小颗粒不是单纯的容器,而是 ...
- jquery-leonaScroll-1.2-自定义滚动条插件
leonaScroll-1.2.js 下载链接地址:http://share.weiyun.com/bb531dd6b1916c0023c176897182dc15 (密码:iZck)[内含压缩版] ...
- 使用属性动画 — Property Animation
属性动画,就是通过控制对象中的属性值产生的动画.属性动画是目前最高级的2D动画系统. 在API Level 11中添加.Property Animation号称能控制一切对象的动画,包括可见的和不可见 ...