js--动画
运动框架实现思想
1.速度(改变值left，right，width，height，opacity)
2.缓冲运动
3.多物体运动
4.任意值变化
5.链式运动
6.同时运动
我们先来介绍第一章改变left值来使物体左右移动
html文件
<!DOCTYPE html>
<html>
<head>
<title>js动画事件</title>
<link href="move.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="move.js"></script>
</head>
<body>
<div id="div1">
<span id="sp1">分享</span>
</div>
</body>
</html>
css文件
*{
margin:0px;
padding:0px;
}
#div1{
width:200px;
height:200px;
position:absolute;
left:-200px;
background:red;
border:1px solid #eeddcc;
}
#sp1{
display:block;
width:20px;
height:80px;
position:absolute;
left:200px;
top:60px;
border:1px solid red;
color:#036;
line-height:40px;//这里设置的宽度只能容纳一个字，所以这两个字上下排列的，但是如果我们想让这两个字在span中居中显示，那么我们就设置line-height的值为height的一半
}
js文件
var timer;
window.onload=function(){
var div1=document.getElementById("div1");
div1.onmouseover=show;
div1.onmouseout=hiden; }
function show(){
clearInterval(timer);//跟前一课程讲的一样，在定义一个定时器前先删除前一次产生的定时器。
var div1=document.getElementById("div1");
timer=setInterval(function(){
if(div1.offsetLeft==0){
clearInterval(timer);
}else{
div1.style.left=div1.offsetLeft+10+"px";//这句话要注意喽，"px"不能丢奥！
} },50)
}
function hiden(){
clearInterval(timer);
var div1=document.getElementById("div1");
timer=setInterval(function(){
if(div1.offsetLeft==-200){
clearInterval(timer);
}else{
div1.style.left=div1.offsetLeft-10+"px";
} },50)
}
效果图：
当我们鼠标移动分享上面时就慢慢显示出来了
当我们鼠标移出来后，红色块就慢慢移回去了。
js--动画的更多相关文章
- 【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- CSS VS JS动画，哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
- JS动画理论
动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...
- css与 js动画 优缺点比较
我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...
- [学习笔记]js动画实现方法，作用域，闭包
一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...
- css3动画与js动画的一些理解
http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...
- js动画（四）
终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...
- css动画特效与js动画特效（一）------2017-03-24
1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
随机推荐
- win 10 禁用后置摄像头
2.双摄像头电脑,甄别时默认开启的是后置摄像头,识别不到人脸. (1)更换设备参加甄别: (2)自行调整:停用电脑后置摄像头,停用后甄别时会默认调取前置摄像头: 以下操作适用于Windows surf ...
- pandas 获取不符合条件的dataframe
pandas 获取不符合条件的dataframe 或将其过滤掉: df[df["col"].str.contains('this'|'that')==False] >> ...
- kafka原理篇
目录 消息队列分类 点对点 发布/订阅 kafka介绍 kafka架构说明 Topic与Partition的关系 partition复制机制 Consumer与Topic的关系 消息队列分类 点对点 ...
- [转帖]Linux firewalld 防火墙使用
Linux firewalld 防火墙使用 2018-06-19 19:26:08 蚩尤后裔 阅读数 2101 收藏 更多 分类专栏: Linux 版权声明:本文为博主原创文章,遵循CC 4.0 ...
- 发现一个企业微信第三方应用开发的疑似BUG
1.企业微信两个账号A(超级管理员),账号B(分级管理员),账号B具有创建应用与小程序权限.2.账号B添加一个第三方应用后(创建后能看到第三方应用),使用下图接口登录时回调的agent一直为空,3.超 ...
- 最新修改Oracle10gscott用户
1.以system登录及输入自己设置口令; 2.更换sysdba身份: conn system/orcl as sysdba; 3.解锁scott用户(因装好默认是锁定的): alter user s ...
- ZYNQ笔记（6）：普通自定义IP封装实现PL精准定时中断
软件的定时中断很难控制精准触发沿的位置,可以通过 PL-PS 的中断完成精准的定时中断.PL 的中断通过 Verilog 代码产生,这样紧密结合 PS-PL 的处理,发挥各自的优势. 一.PL 侧定时 ...
- 开源规则引擎 Drools 学习笔记 之 -- 1 cannot be cast to org.drools.compiler.kie.builder.impl.InternalKieModule
直接进入正题 我们在使用开源规则引擎 Drools 的时候, 启动的时候可能会抛出如下异常: Caused by: java.lang.ClassCastException: cn.com.cheng ...
- Linux学习笔记之安装报错/lib/ld-linux.so.2: bad ELF interpreter
0x00 64位系统中安装了32位程序解决办法 是因为64位系统中安装了32位程序 解决方法: yum install glibc.i686 0x01 解决交叉编译环境错误 yum install l ...
- SQL Server SSIS中的变量使用表达式后，就无法更改其值了
在SQL Server SSIS中,我们可以为变量定义初始值和表达式,其实SSIS的变量定义为表达式后我们就无法更改变量的值了,我们来做如下实验: 首先我们在SSIS包中定义一个String类型的变量 ...