js基础之动画(一)
一、让div动起来
var oBtn = document.getElementById('btn1');
var timer='';//设置定时器
oBtn.οnclick=function startMove(){
var oDiv = document.getElementById('div1');
clearInterval(timer);//关闭原有的定时器,否则多个定时器会叠加
timer=setInterval(function(){
var iSpeed=3;
if(oDiv.offsetLeft>=208){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}
},30);
}
二、‘分享到’侧边栏
var timer=null;
function startMove(iTarget,iSpeed){
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==iTarget){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}
},30);
}
window.οnlοad=function(){
var oDiv = document.getElementById('div1');
oDiv.οnmοuseοver=function(){
startMove(0,10);
}
oDiv.οnmοuseοut=function(){
startMove(-100,-10);
}
}
三、图片淡入淡出效果
var timer=null;
var alpha=30;
function startMove(iTarget,iSpeed){
var oImg = document.getElementById('img1');
clearInterval(timer);
timer=setInterval(function(){
if(alpha==iTarget){
clearInterval(timer);
}else{
alpha+=iSpeed;document.title=alpha;
oImg.style.filter='alpha(opacity:'+alpha+')';
oImg.style.opacity=alpha/100;
}
},30);
}
window.οnlοad=function(){
var oImg = document.getElementById('img1');
oImg.οnmοuseοver=function(){
startMove(100,5);
}
oImg.οnmοuseοut=function(){
startMove(10,-5);
}
四、实现缓动效果
var oBtn = document.getElementById('btn1');
var timer='';
oBtn.οnclick=function startMove(iTarget){
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var iSpeed=(300-oDiv.offsetLeft)/8;//缓动效果
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);//消除小数点值的bug
document.title=iSpeed+'/'+oDiv.offsetLeft;
if(oDiv.offsetLeft==300){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}
},30);
}
五、缓动侧边栏
var timer=null;
function startMove(iTarget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var iSpeed=(iTarget-oDiv.offsetTop)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(oDiv.offsetTop==iTarget){
clearInterval(timer);
}else{
oDiv.style.top=oDiv.offsetTop+iSpeed+'px';
}
},30);
}
window.οnscrοll=function(){
var oDiv = document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
startMove(parseInt(t));//消除抖动
}
六、匀速运动停止条件:与目标点无限接近即可
timer=setInterval(function(){
var iSpeed=0;
if(oDiv.offsetLeft<iTarget){
iSpeed=7
}else{
iSpeed=-7
}
if(Math.abs(oDiv.offsetLeft-iTarget)<7){//是否到达终点
clearInterval(timer);
oDiv.style.top=iTarget+'px';
}else{
oDiv.style.top=oDiv.offsetLeft+iSpeed+'px';
}
},30);
转载于:https://www.cnblogs.com/kuangliu/p/3479461.html
js基础之动画(一)相关推荐
- GSAP JS基础教程--动画的控制及事件
好多天没有写无博文啦,今天无聊就再写一下! 今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensoc ...
- SVG.js 基础图形绘制整理(二)
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...
- 小汤学编程之JavaScript学习day01——认识JS、JS基础语法
一.认识JS 1.JavaScript的组成 2.浏览器执行js简介 3.JavaScript是什么? 4.扩展内容 二.JS基础语法 1.代码书写位置 2.变量 ...
- Canvas基础-粒子动画Part2
紧接上一篇文章 Canvas基础-粒子动画Part1 其实这篇早在一个星期之前就应该发了,无奈事情太多,而且我又跑去写微信公众号了. 粒子动起来 有了上一篇的基础,我们已经可以获得粒子,并将轮廓显示在 ...
- Web3D编程入门总结——WebGL与Three.js基础介绍
1 /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成"webgl与three.js基础介绍"."面向对象的基础3D场景框架编写".&quo ...
- JS基础(乾坤未定,你我皆是黑马4-2)
上一篇呐就是纯粹为了跟js见个面 不知道上手是不是搞得有点上头 这篇来讲JS基础语法,小白(不会闭包的)可以认真看一下 这篇介绍了JS语法.打印99乘法表.数组去重.数组排序****js知识点罗列 学 ...
- 前端工程师面试问题归纳(一、问答类html/css/js基础)
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- cytoscape.js基础篇
cytoscape.js基础篇 cytoscape.js 包引用 版本信息 Citation Funding 基础篇 cytoscape.js变量描述 位置 Elements JSON 节点属性说明 ...
- js基础day01小结
第02阶段.前端基本功.前端基础.入门语法 计算机知识补充 学习目标 理解 简单了解计算机组成 认识计算机内存 一. 核心内容 1. 计算机组成 1.1 软件(程序) 系统软件:Windows.Lin ...
- python 动画场景_vue页面引入three.js实现3d动画场景操作
vue中安装Three.js 近来无聊顺便研究一些关于3D图形化库.three.js是JavaScript编写的WebGL第三方库.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它通过 ...
最新文章
- 【转】Mac 程序员的十种武器
- C语言按两个字节读写二进制文件,C语言 读写二进制文件(示例代码)
- (万字长文)Spring的核心知识尽揽其中
- 一位83岁独立开发者教会我的道理
- Free Download Top 100 Hacking Books
- 网曝 Solaris 系统被砍,开发团队将大半被解雇
- pC机OracLe库磁盘坏如何恢复,电脑硬盘坏了数据能恢复吗(6步教你自己在家轻松恢复数据)...
- 巧改注册表拥有超级cpu
- pytorch-分类任务训练loss不变
- voices——最后的决赛
- php如何简单抠图,这三种新手抠图方法你会几种?
- BurpSuite 1.6~2.x版本汉化版工具
- dns服务器优化 360,360DNS优化
- nginx配置ssl证书
- 使用opengl和c++实现迷宫地图的路径搜索和显示(基于DFS)
- C++字符串常量总结(包含表达式必须是可修改的左值问题)
- 12/14 计算器雏形
- 圆周率:山颠一寺一壶酒
- Visual Studio 2013如何显示代码行数
- 微信公众平台打不开或加载不完全解决办法