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 ...
随机推荐
- FileReader获取文件的base64编码
<input type="file" id="picFile" /> function readFile() { var obj = documen ...
- BZOJ2109: [Noi2010]Plane 航空管制
Description 世博期间,上海的航空客运量大大超过了平时,随之而来的航空管制也频频 发生.最近,小X就因为航空管制,连续两次在机场被延误超过了两小时.对此, 小X表示很不满意. 在这次来烟台的 ...
- GOOD MEETINGS CREATE SHARED UNDERSTANDING, NOT BRDS!
Deliverables and artifacts were a focal point of BA work during the early part of my career. If I ...
- Xcode8中处理打印日志的配置
Xcode8中处理打印日志的配置
- Java 集合类的特性
ArrayList: 元素单个,效率高,多用于查询 Vector: 元素单个,线程安全,多用于查询 LinkedList: 元素单个,多用于插入和删除 HashMap: 元素成对,元素可为空 H ...
- Allegro之无法保存（提示和用户有关或者和lock有关）
使用中无意出现此情况 无奈重新打开文件时发现brd文件下面有个.brd.lck文件,顺手删掉,回复正常~ 此为bug解bug,具体方法下次遇到再仔细研究是为什么~ 养成隔几分钟手动保存的好习惯,防止b ...
- NPOI、MyXls、Aspose.Cells 导入导出Excel（转）
Excel导入及导出问题产生: 从接触.net到现在一直在维护一个DataTable导s出到Excel的类,时不时还会维护一个导入类.以下是时不时就会出现的问题: 导出问题: 如果是asp.net,你 ...
- gitlab使用有感之坚持
当老师请大二的学弟教我们使用这个软件的时候, 当时就吓坏我了,感觉好高大上的样子,全英文的,还有什么阿里云的服务器用来代码管理:心情一下子就不好了,感觉自己懂得东西好少啊,比学弟懂得都少,跟不上时代的 ...
- min.js反压缩
给个网址自己体会.. http://jsbeautifier.org/ 当需要修改min.js中的代码时,把min.js文件ctrl+c ctrl+v扔到上面的网页里,点击beautify 即可
- 开源消息队列：NetMQ
NetMQ 是 ZeroMQ的C#移植版本. ZeroMQ是一个轻量级的消息内核,它是对标准socket接口的扩展.它提供了一种异步消息队列,多消息模式,消息过滤(订阅),对多种传输协议的无缝访问. ...