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 ...
随机推荐
- [Gamma]Scrum Meeting#9
github 本次会议项目由PM召开,时间为6月4日晚上10点30分 时长15分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客,组织例会 撰写博客,组织例会 swoip 前端显示屏幕,翻译坐 ...
- django:CBV模式，源码解析
非常好 DRF执行流程源码解析 https://www.cnblogs.com/suguangti/p/11120793.html https://www.cnblogs.com/haitaoli/p ...
- PB级数据实时查询，滴滴Elasticsearch多集群架构实践
PB级数据实时查询,滴滴Elasticsearch多集群架构实践 mp.weixin.qq.com 点击上方"IT牧场",选择"设为星标"技术干货每日送达 点 ...
- 使用benchmarkSQL测试数据库的TPCC
压力测试是指在MySQL上线前,需要进行大量的压力测试,从而达到交付的标准.压力测试不仅可以测试MySQL服务的稳定性,还可以测试出MySQL和系统的瓶颈. TPCC测试:Transaction Pr ...
- spring aop 一个挡板例子
import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.ann ...
- 关于 golang build
如何编译 golang 的编译还是比较容易的,用法如下: go build [-o output] [-i] [build flags] [packages] 上面方括号标记的参数,都可以没有-- 最 ...
- LOJ2257 SNOI2017 遗失的答案 容斥、高维前缀和
传送门 数字最小公倍数为\(L\)的充分条件是所有数都是\(L\)的约数,而\(10^8\)内最多约数的数的约数也只有\(768\)个.所以我们先暴力找到所有满足是\(L\)的约数.\(G\)的倍数的 ...
- mysql 5.7 修改root密码允许远程连接
1.修改root密码(其他用户类似) 试过网上看的一些 在mysql数据库执行 update user set password='新密码' where user='root' 执行说找不到字段, ...
- Java可视化计算器
利用java中的AWT和SWING包来做可视化界面. 首先来简单了解一下这两个包: AWT和Swing都是Java中用来做可视化界面的.AWT(Abstract Window Toolkit):抽象窗 ...
- springmvc集成shiro后，session、request是否发生变化
1. 疑问 我们在项目中使用了spring mvc作为MVC框架,shiro作为权限控制框架,在使用过程中慢慢地产生了下面几个疑惑,本篇文章将会带着疑问慢慢地解析shiro源码,从而解开心里面的那点小 ...