Javascript 运动基础 01
JS运动基础
运动基础
<style>
#div1 {width:200px; height:200px; background:red; position:absolute; top:50px; left:0px;}
</style>
<script>
var timer=null; function startMove()
{
var oDiv=document.getElementById('div1'); timer=setInterval(function (){
var speed=; if(oDiv.offsetLeft>=)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}, );
}
</script>
</head> <body>
<input id="btn1" type="button" value="开始运动" onclick="startMove()" />
<div id="div1">
</div>
</body>
/**/ div 的 css 样式一点要 绝对定位 position:absolute; top:50px; left:0px;
<style>
#div1{ width:100px;height:100px; position: absolute; top:50px; left:0px; background:#CCC;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;} </style> <script> //window.onload=
function startMove()
{
var oDiv=document.getElementById('div1');
setInterval(function (){
var speed=(300-oDiv.offsetLeft)/10;
//由于这里的除法会得到小数
//所以使用了取整方法，向上取整 即 0.01~0.9999=1
speed=Math.ceil(speed);//向下取整 即用 floor 0.001~0.999=0
oDiv.style.left=oDiv.offsetLeft+speed+'px';
document.title=oDiv.offsetLeft+','+speed;
},30)
}
</script>
</head> <body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
<div id="div2"></div> </body>
使用了 取整方法 解决运动中的bug
使用前 ： 使用后 ：
<style>
#div1{ width:120px; height:200px; background:#CCC; position:absolute; left:-120px;}
#div1 span { width:20px; height:70px; background:#FFF; border:1px #CCC solid; position:absolute; line-height:20px; top:70px; right:-20px;} </style> <script> window.onload=function (){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function ()
{
// startMove();
//Move(0,10);
Move2(0);
}
oDiv.onmouseout=function ()
{
//Move(-120,-10);
// returnMove();
Move2(-120);
}
}
var timer=null // 用于记录计时器
function startMove()
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function ()
{
if(oDiv.offsetLeft==0)
{
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft+10+'px';
}
}
,30)
}
function returnMove()
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function ()
{
if(oDiv.offsetLeft==-120)//这里特别要注意 不能使用 oDiv.style,.left==-120
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft-10+'px';
}
}
,30) }
// 优化后的函数
function Move(offset,speed)
{
//var offset=0;
//var speed=0;
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function ()
{
if(oDiv.offsetLeft==offset)//这里特别要注意 不能使用 oDiv.style,.left==-120
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}
,30) }
//再次优化
function Move2(offset)
{
//var offset=0;
//var speed=0;
var oDiv=document.getElementById('div1');
clearInterval(timer); timer=setInterval(function ()
{
var speed=0;
if(oDiv.offsetLeft>offset){ speed=-10; }else{ speed=10;}
if(oDiv.offsetLeft==offset)//这里特别要注意 不能使用 oDiv.style,.left==-120
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}
,30) }
</script> </head> <body>
<div id="div1">
<span>分享到</span>
</div>
</body>
分享到
<style>
#div1 {width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;}<!-- 设置背景颜色的透明度 为了兼容主流浏览器 使用了两种设置法 -->
</style> <script> window.onload=function ()
{
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function ()
{
startJoin(100);
};
oDiv.onmouseout=function ()
{
startJoin(30);
};
} var alpha=30;
var timer=null;
function startJoin(iTarget)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function (){
var speed=0;
if(alpha<iTarget)
{
speed=10;
}
else
{
speed= -10;
} if(alpha==iTarget)
{
clearInterval(timer);
}
else
{
alpha+=speed; oDiv.style.filter='alpha(opacity:'+alpha+')' // 'alpha(opacity:' +alpha+ ')' 为了兼容，还有需加入下面的代码
oDiv.style.opacity=alpha/100 ; // alpha 后面是小数值,故除以100
}
},30) } </script> </head> <body>
<div id="div1"></div>
</body>
淡入淡出
<style>
#div1 {width:100px; height:150px; background:#999; position:absolute; right:0; bottom:0;}
</style> <script>
window.onscroll=function ()
{
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;// //oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px'; startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop); //第一个应该是可视窗口的高度，减去div的高度那应该就等于div顶部与可视窗口顶部的距离吧
/*document.documentElement.scrollTop指的是滚动条的垂直坐标
document.documentElement.clientHeight指的是浏览器可见区域高度
document.documentElement.clientHeight-oDiv是悬浮框的初始垂直坐标（相对于body的top值）（这个值是固定不变的）
但是当你拉动滚动条的时候，悬浮框的垂直坐标（target）必须要在初始坐标的基础上增减相应的值才能获得视觉上随滚动条滚动
的效果，而这个增减的值就是滚动条拉动的距离，即你这个scrollTop
*/ } var timer=null; function startMove(iTarget)
{
var oDiv=document.getElementById('div1'); clearInterval(timer);
timer=setInterval(function (){
var speed=(iTarget-oDiv.offsetTop)/2;
speed=speed>0?Math.ceil(speed):Math.floor(speed); if(oDiv.offsetTop==iTarget)
{
clearInterval(timer);
}
else
{
oDiv.style.top=oDiv.offsetTop+speed+'px';
}
}, 30);
} </script> </head> <body style="height:2000px;">
<div id="div1"></div> </body>
右侧悬浮框
对联悬浮框：
startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2)+scrollTop);
只需要改动这行代码即可
Javascript 运动基础 01的更多相关文章
- Javascript运动基础
javascript的运动非常实用,通过控制需要运动块的实际距离与要到达的距离的关系,结合定时器来控制小方块的各种运动. 运动框架 <!DOCTYPE html><html>& ...
- javascript基础01
javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...
- javaScript系列 [01]-javaScript函数基础
[01]-javaScript函数基础 1.1 函数的创建和结构 函数的定义:函数是JavaScript的基础模块单元,包含一组语句,用于代码复用.信息隐蔽和组合调用. 函数的创建:在javaScri ...
- day38—JavaScript的运动基础-匀速运动
转行学开发,代码100天——2018-04-23 一.运动基础框架 JavaScript的运动可以广义理解为渐变效果,直接移动效果等,图网页上常见的“分享到”,banner,透明度变化等.其实现的基本 ...
- JavaScript自己整理的基础-01
1.JavaScript 简介: JavaScript是互联网上最流行的脚本语言,所有现代的HTML都使用JavaScript.既然是脚本语言,那么它的特点就有一下三种: (1)弱类型: (2)解释型 ...
- 快速掌握JavaScript面试基础知识(三)
译者按: 总结了大量JavaScript基本知识点,很有用! 原文: The Definitive JavaScript Handbook for your next developer interv ...
- 快速掌握JavaScript面试基础知识(二)
译者按: 总结了大量JavaScript基本知识点,很有用! 原文: The Definitive JavaScript Handbook for your next developer interv ...
- 原生JavaScript运动功能系列（五）：定时定点运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...
- 第八节 JS运动基础
运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
随机推荐
- 字节转换/编码转换全为转载GBK,BIG5,utf8,unicode
C/C++中的字节转换 宽字节转单字节 :size_t wcstombs( char *mbstr, const wchar_t *wcstr, size_t count ); 单字节转宽字节 :si ...
- UVA 10325 lottery 容斥原理
题目链接 给出m个数, 求1-n的范围内, 无法整除这m个数之中任何一个数的数的个数. 设m个数为a[i], 对任意的i, n/a[i]是n中可以整除a[i]的数的个数, 但是这样对于有些数重复计算了 ...
- 关于yield创建协程的理解
先上利于理解的代码: #coding:utf-8 def consumer(): c_r = '' while 1: m = yield c_r if not m: return print(&quo ...
- [LeetCode]题解（python）：124-Binary Tree Maximum Path Sum
题目来源: https://leetcode.com/problems/binary-tree-maximum-path-sum/ 题意分析: 给定一棵树,找出一个数值最大的路径,起点可以是任意节点或 ...
- 高质量程序设计指南C/C++语言——C++/C常量（2）
- [转] iOS多线程编程之NSOperation和NSOperationQueue的使用
<iOS多线程编程之NSThread的使用> 介绍三种多线程编程和NSThread的使用,这篇介绍NSOperation的使用. 使用 NSOperation的方式有两种, 一种是用定义好 ...
- codeforces#FF DIV2C题DZY Loves Sequences（DP）
题目地址:http://codeforces.com/contest/447/problem/C C. DZY Loves Sequences time limit per test 1 second ...
- [python网络编程]DNSserver
在上一篇中,使用scrapy改动源IP发送请求的最后我们提到因为hosts文件不支持正则,会导致我们的随机域名DNS查询失败. 使用DNS代理服务器能够解决问题, 以下是我用gevent写的小工具.非 ...
- Ext JS学习第十三天 Ext基础之 Ext.Element
•Ext.Element提供了181个方法,嗯,还没完,只是在4.1版本中是这样,最新的4.2版本貌似又增加了新方法,可谓是相当丰富给力.那么根据操作类型基本可以分为查询系.DOM操作系.样式操作系. ...
- android中使用surfaceview＋MediaPlayer播放视频
Android中播放视频主要有两种方式: 使用其自带的播放器.指定Action为ACTION_VIEW,Data为Uri,Type为其MIME类型 使用android自带的VideoView,这种方法 ...