js实现匀速运动及透明度动画
1.html代码
<body>
<div id="container">
<span id="btn"></span>
</div>
</body>
2.css样式
*{
margin: ;
padding: ;
}
#container{
height: 200px;
width: 200px;
position: relative;
left: -200px;
background-color: #6effcd;
}
#btn{
height: 60px;
width: 30px;
position: absolute;
left: 200px;
top: 75px;
background-color: #73eeff;
}
3.js代码
window.onload = function(){
var container=document.getElementById('container');
var btn=document.getElementById('btn');
//实现透明度动画
btn.onmouseover = function(){
moveStart(,);
};
btn.onmouseout = function(){
moveStart(-,);
}
//实现匀速移动
btn.onclick = function(){
if(container.offsetLeft==-)
{
moveOut();
}
else{
moveBack();
}
};
};
var timer=null;//控制container匀速移动的timer
function moveOut(){
clearInterval(timer);
timer=setInterval(function(){
if(container.offsetLeft == )
{
clearInterval(timer);
}
else{
container.style.left=container.offsetLeft++'px';
}
},);
}
function moveBack(){
clearInterval(timer);
timer=setInterval(function(){
if(container.offsetLeft == -)
{
clearInterval(timer);
}
else{
container.style.left=container.offsetLeft-+'px';
}
},);
}
var alpha = ;
var timer1=null;//控制btn透明度动画的timer
function moveStart(oSpeed,oTarget){
clearInterval(timer1);
timer1 = setInterval(function(){
if(oTarget == alpha){
clearInterval(timer1);
}
else{
alpha += oSpeed;
btn.style.filter = 'alpha(opacity:'+alpha+');'
btn.style.opacity = alpha/100.0;
}
},);
}
js实现匀速运动及透明度动画的更多相关文章
- js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画
主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) ...
- js动画实现透明度动画
在本次实例中,由于一般主流的浏览器对于透明度opacity最大值为1,但是在IE6最大值是100,此次例子是按主流浏览器的透明度来算的,所以定义的是小数,也可以定义为整数为单位,在运算的时候遇到主流的 ...
- WOW.js轻松为网页添加动画切入效果
由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了.个人感觉正式js强大的可植入性, 才使他如此的使用火爆,反正博主是特别喜欢这一点 Y(^o^)Y~ . 今天就和大家 ...
- RN Animated透明度动画
主要代码解析: 如果我们希望吧Animated.Value从0变化到1,把组件位置从60px移动到0px,把不透明度从0编导1,就可以使用style的属性来实现 <Animated.Text s ...
- Vue.js表单校验；动画指令；避免内存泄露。
Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...
- js渐隐渐现透明度变化淡入淡出轮播图
js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...
- 基于Babylon.js编写简单的骨骼动画生成器
使用骨骼动画技术可以将网格的顶点分配给若干骨头,通过给骨头设定关键帧和父子关系,可以赋予网格高度动态并具有传递性的变形 效果.这里结合之前的相关研究在网页端使用JavaScript实现了一个简单的骨骼 ...
- 使用two.js生成的卫星环绕动画效果
来源:GBin1.com two.js是一个帮助你实现绘图和动画效果的类库,同时支持三种前端绘图实现: webgl svg 2d画布 使用这个类库,可以方便的支持这三种不同的实现,你只需要设置参数:T ...
- 第一百四十二节，JavaScript，封装库--运动动画和透明度动画
JavaScript,封装库--运动动画和透明度动画 /** yi_dong_tou_ming()方法,说明 * * yi_dong_tou_ming()方法,将一个元素,进行一下动画操作 * 1,x ...
随机推荐
- Django框架学习
两个月前学习的Django框架,写了个简易婚恋调查网站,代码就懒得全贴了,有两张图记录下
- Centos7 编译安装 Nginx PHP Mariadb Memcached 扩展 ZendOpcache扩展 (实测 笔记 Centos 7.3 + Mariadb 10.1.20 + Nginx 1.10.2 + PHP 7.1.0 + Laravel 5.3 )
环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G,双网卡) 系统版本:CentOS-7-x86_64-Minimal-1611.iso 安装步骤: 1.准备 1.0 查看硬 ...
- 领域驱动有感<上>
最近看了<领域驱动设计:软件核心复杂性应对之道>,从字面上来看领域驱动就是解决软件复杂性问题的:然而领域驱动设计的门槛很高,没有很深厚的面向对象编码能力几乎不可能实践成功.Martin F ...
- WPF整理-Mutex确保Application单例运行
有时我们不希望我们的WPF应用程序可以同时运行有多个实例,当我们试图运行第二个实例的时候,已经运行的实例也应该弹出来. 我们可以用Mutex来实现 打开App.xaml.cs,在App类中添加如下内容 ...
- 一鼓作气 博客--第六篇 note6
1.无论公司付给你多少,你的青春都是廉价的!! 2.通往财富自由之路 --得到APP 3.time 3.1 time.time() t = time.time() print(t) #--->1 ...
- java接口中定义成员变量
//抽象类中可以定义如下成员变量:public abstract class People { public String name; public int age; public abstract ...
- 发现meta有个刷新页面的办法。
meta是html中不可缺少的一个标签,它的应用以方便浏览器搜索并分类当前网页的内容. meta总是放在head标签的第一个位置.今天我在复习前端知识的时候,在网上发现了用meta刷新网页的好办法. ...
- SQL SERVER全面优化-------写出好语句是习惯
前几篇文章已经从整体提供了诊断数据库的各个方面问题的基本思路...也许对你很有用,也许你觉得离自己太远.那么今天我们从语句的一些优化写法及一些简单优化方法做一个介绍.这对于很多开发人员来说还是很有用的 ...
- c#实现redis客户端(一)
最近项目使用中要改造redis客户端,看了下文档,总结分享一下. 阅读目录: 协议规范 基础通信 状态命令 set.get命令 管道.事务 总结 协议规范 redis允许客户端以TCP方式连接,默认6 ...
- C/C++ makefile自动生成工具(comake2,autotools,linux),希望能为开源做点微薄的贡献!
序 在linux下C或C++项目开发,Makefile是必备的力气,但是发现手写很麻烦. 在百度有个comake2工具,用于自动生成Makefile工具,而在外边本想找一个同类工具,但发现 ...