js动画(一)
终于放寒假了,哈哈哈,然后,也不准备闲着吧,就是再熟悉一下旧的东西,然后把新的东西也拿来分享一下,自己也准备好了再这个寒假
好好的提高一下自己,哎,菜鸟一枚,真正去实战了,发现自己手上的武器太少了,所以就,加油加油,这个寒假好好的完成计划。
嗯,废话也不多说了,先介绍,三种js基本动画,匀速吗,变速,透明度变化。
匀速
代码如下:
- <script>
- window.onload=function(){
- var div1 = document.getElementById("div1");/*获取变化的框Id,div我称之为框*/
- div1.onmouseover=function(){
- onMove(10,0);/*鼠标移入,这两个数值,分别控制速度,和到达目标的位置数值*/
- }
- div1.onmouseout=function(){
- onMove(-10,-200)/*鼠标移出,如上*/
- }
- }
- var timer=null;/*全局变量,clearInterval()清除的是他上一链的东西*/
- function onMove(speed,mu){
- clearInterval(timer);/*避免用户多次点击,产生多个定时器*/
- var div1 = document.getElementById("div1");
- timer=setInterval(function(){
- if(div1.offsetLeft == mu)
- {
- clearInterval(timer);/*作用:不让其一直变化下去*/
- }
- else{
- div1.style.left=div1.offsetLeft+speed+"px";
- }
- },30)
- }
- </script>
变速
代码如下:
- <script>
- window.onload=function(){
- var div1 = document.getElementById("div1");
- div1.onmouseover=function(){
- onMove(10,0);
- }
- div1.onmouseout=function(){
- onMove(-10,-200)
- }
- }
- var timer=null;/*全局变量,clearInterval()清除的是他上一链的东西*/
- function onMove(speed,mu){
- clearInterval(timer);
- var div1 = document.getElementById("div1");
- timer=setInterval(function(){
- speed=(mu-div1.offsetLeft)/15;
- /*与上述不同之处,变速可以在这里控制*/
- speed=speed>0?Math.ceil(speed):Math.floor(speed-1);
/*这里面最后多减1是因为浏览器问题*/- if(div1.offsetLeft == mu)
- {
- clearInterval(timer);
- }
- else{
- div1.style.left=div1.offsetLeft+speed+"px";
- }
- },30)
- }
- </script>
透明度变化
代码如下:
- <script>
- window.onload = function(){
- div1.onmouseover = function(){
- OnOpacity(5,100);/*鼠标移入,两个数值分别控制,变化的速率和到达的透明度值是多少*/
- }
- div1.onmouseout = function(){
- OnOpacity(-5,30);/同上/
- }
- }
- var timer=null;
- var alpha=30;
- function OnOpacity(speed,mu){
- var div1 = document.getElementById("div1");
- clearInterval(timer);
- timer=setInterval(function(){
- if(alpha == mu)
- {
- clearInterval(timer);
- }
- else
- {
- alpha+=speed;
- div1.style.opacity=alpha/100;
- }
- },10)
- }
- </script>
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 ...
随机推荐
- [译]JDK 6 and JDK 7中的subString()方法
(说明,该文章翻译自The substring() Method in JDK 6 and JDK 7) 在JDK 6 and JDK 7中的substring(int beginIndex, int ...
- Repository 仓储
Repository 仓储 写在前面 首先,本篇博文主要包含两个主题: 领域服务中使用仓储 SELECT 某某某(有点晕?请看下面.) 上一篇:Repository 仓储,你的归宿究竟在哪?(二)-这 ...
- DBMS_LOB包的使用
DBMS_LOB包的使用 1. dbms_lob.append( dest_lob IN OUT NOCOPY BLOB, src_lob IN BLOB) dbms_lob.appen ...
- setTimeout与setInterval的区别
setTimeout与setInterval的区别:1.setTimeout设置后隔指定时间后只会执行一次2.setInterval设置后会每隔指定时间执行一次3.setTimeout一般在方法内部使 ...
- SQLSERVER误删Windows登录用户
SQLSERVER误删除了Windows登录用户验证方式使用Windows身份验证的解决方法 SQLSERVER误删Windows登录用户验证方式使用Windows身份验证的解决方法 今天看到这篇 ...
- 手机APP下单支付序列图
今天安装了Visio,学习了下如何使用,画了一下公司现在项目的下单支付序列图,话就不多说了,直接上图,处女作,欢迎指正!
- 【ios开发】控件细究1:UITableView
工作了将近两个月,共接手两个项目,在项目中用的最多的就是UITableView了,但是也是问题出现的最多的地方,由于一开始不熟练,导致很多问题花了很长时间才解决.所以利用这两天空闲时间,好好梳理一下这 ...
- noip模拟赛:电话时间[字符串]
[问题描述] 某人总是花很多时间给父母打电话.有一次他记录了打电话的开始时间和结束时刻t1和t2,请你帮他算算此次通话一共用了多少秒.又有一次,他记录了打电话的开始时刻t1和通话的时间长度len,请你 ...
- 使用Fiddler伪造服务端返回数据,绕过软件试用期验证
用过一款和visual studio集成非常好的移动端模拟器,有7天的试用期,可惜不支持国内支付,试用到期了怎么办,不想重装系统. 昨天看有人破解admin page,于是尝试自己动手试试,因为这款模 ...
- [转]Data Structure Recovery using PIN and PyGraphviz
Source:http://v0ids3curity.blogspot.com/2015/04/data-structure-recovery-using-pin-and.html --------- ...