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 ...
随机推荐
- T-SQL Recipes之Organizing and Archiving Data
The Problem 当我们处理存档数据或内存数据时,我们想要自定义命名表名,数据库,架构加上日期,时间,或者应用名时,用标准的TSQL来实现是比较困难的. 假设我们有一张日志表,增长速度异常快.但 ...
- Python调用HTTP接口并传递cookie
#get接口调用 import urllib import urllib2 get_url = "http://10.10.3.63/test?id=123&name=nba&quo ...
- 干货！IT小伙伴们实用的网站及工具大集合！持续更新！
1.Git 还在担心自己辛辛苦苦写的代码被误删了吗?还在担心自己改错了代码不能挽回吗?还在苦恼于多人开发合作找不到一个好的工具吗?那么用Git就对 了,Git是一个开源的分布式版本控制系统,用以有效. ...
- 两种让tableview返回顶部的方法
1. [self.tableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:_currentRow inSection:0] animat ...
- ADO.NET数据访问模板整理
/// <summary> /// 数据访问类:hi_test /// </summary> public partial class TestDA { public Test ...
- LeetCode题目按公司分类
LinkedIn(39) 1 Two Sum 23.0% Easy 21 Merge Two Sorted Lists 35.4% Easy 23 Merge k Sorted Lists 23.3% ...
- 猥琐的wordpress后门分享
https://www.t00ls.net/thread-37312-1-1.html 一个可以自动调用管理员帐号登录wordpress后台的方法. <?php require('../../. ...
- Mysql修改root密码
一.启动命令行,输入: taskkill /f /im mysqld.exe //关闭mysql 二.转入mysql的bin目录下 三.输入:mysqld --skip-grant-tables // ...
- PHP好任性 —— 大小写敏感有两种规则，然而并没有什么特别原因
大小写敏感 变量.常量大小写敏感 大小写不敏感 类名.方法名.函数名.魔法变量大小写不敏感 原因 有人原引了Rasmus 在一次会议上的发言大意: "I'm definitely not a ...
- GOTO Berlin: Web API设计原则
在邮件列表和讨论区中有很多与REST和Web API相关的讨论,下面仅是我个人对这些问题的一些见解,并没有绝对的真理,InnoQ的首席顾问Oliver Wolf在GOTO Berlin大会上开始自己的 ...