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 ...
随机推荐
- 遍历datatable的方法
+方法一:DataTable dt = dataSet.Tables[0];for(int i = 0 ; i < dt.Rows.Count ; i++){string strName = d ...
- BestCoder Round 69 Div 2 1001&& 1002 || HDU 5610 && 5611
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5610 如果杠铃总质量是奇数直接impossible 接着就考验耐心和仔细周全的考虑了.在WA了三次后终于发 ...
- 安卓手机USB网络共享，电脑卡顿、反应慢
1.首先需要把手机连接到电脑,在手机上打开USB网络共享. 2.打开设备管理器 3.在网络适配器中,找到Remote NDIS based Internet Sharing Device,右键更新驱动 ...
- Android系列：res之shape制作
大家好,pls call me francis. nice to me you. 本文将介绍使用在Android中使用shape标签绘制drawable资源图片. 下面的代码是shap标签的基本使用情 ...
- .Net程序员之不学Java做安卓开发:Android Studio中的即时调试窗口
对学.Net的人来说,JAVA开发是一场噩梦. .net中的即时窗口,调试时直接在里面写代码,对程序中的各种方法/属性进行调用,很方便. Android Studio中找了好久,参考如下网址,也有类似 ...
- jQuery的几种简单实用效果
许久未分享博客,或许已生疏. 闲来无事, 分享几个jQuery简单实用的效果案例 不喜勿喷... 1.页面常用的返回顶部 <!DOCTYPE html> <html lang=&qu ...
- ARM 编译 phddns
参考博文http://bluegemyf.blog.163.com/blog/static/11816340201310472751513/ 1.安装必要的开发包 sudo apt-get inst ...
- spring mvc + ehcache 利用注解实现缓存功能
我的spring是3.1的,因为项目需求,需要在查询时候加上缓存,小白一个,完全没有用过缓存(ehcache),摸索了一天终于会了一点通过注解来使用ehcache进行缓存,立刻给记录下来. 首先 我的 ...
- 订单支付成功后存储过程 - MYSQL
BEGIN SET @userId = (SELECT user_id FROM t_shoporder WHERE id = orderId); /*修改订单状态,改成已支付*/ ,update_t ...
- final关键字(final是最终的)
final关键字(final是最终的) 1.final修饰特点 a.修饰类,类不能被继承 b.修饰变量,变量就变成了常量, 修饰基本数据类:final int num = 10; 修饰引用数据类型变量 ...