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 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
随机推荐
- 采用translate实现垂直水平居中
今天分享一个利用css3新特性实现垂直水平居中的方法. 通过对元素进行绝对定位再配合transform中的translate实现. 代码如下: html <div id="conten ...
- codeforces 451E. Devu and Flowers 容斥原理+lucas
题目链接 给n个盒子, 每个盒子里面有f[i]个小球, 然后一共可以取sum个小球.问有多少种取法, 同一个盒子里的小球相同, 不同盒子的不同. 首先我们知道, n个盒子放sum个小球的方式一共有C( ...
- OSG项目经验2<在场景中添加文字面版>
添加文字版需要用到osg的三个名字空间: osgText::Text,这个类用来添加文字和设置文字的一些属性: ...
- 【图文教程】用“iz3d”软件将您的游戏打造为红蓝3D游戏。
iz3d是一款能将普通3D游戏转换为红蓝3D游戏的软件.基本上支持所有游戏,或许没用过的人会认为这只是类似于播放器中的一个小功能,将平面图形做成“伪3D”红蓝效果. 实际上不是的,游戏与平面图的结构不 ...
- 帝国cms让当前栏目显示不同样式（图文）
在使用帝国cms制作栏目导航条时,我们可能会需要根据当前栏目,使当前栏目样式不同. 如图: 此类导航,源代码一般为 <li>全站首页</li> <li class=&qu ...
- mysql读写分离
严格意义上讲,MySQL 读.写分离确实存在上述情况,这是由Master-Slave 异步复制存在延迟所导致的,且Master binlog的写入为多线程,而Slave同步的sql_thread为单线 ...
- flex正则表达式
正则表达式是一种通用的标准,大部分计算机语言都支持正则表达式,包括as3,这里收集了一些常用的正则表达式语句,大家用到的时候就不用自己写了 ^\d+$ //匹配非负整数(正整数 + 0) ^[0-9] ...
- .c和.h文件的区别（头文件与之实现文件的的关系~ ）
.c和.h文件的区别 一个简单的问题:.c和.h文件的区别 学了几个月的C语言,反而觉得越来越不懂了.同样是子程序,可以定义在.c文件中,也可以定义在.h文件中,那这两个文件到底在用法上有什么区别呢 ...
- UISegmentedControl(分页控制器) AND UISlider(滑块控制器)
- (void)viewDidLoad { [super viewDidLoad]; UIImageView * animatedImageView = [[UIImageView alloc]ini ...
- 简单JSONP跨域请求
JSONP原理:利用<script>标签的src属性实现跨域的请求.可在URL中提供回调函数的名字.后台进过处理后将数据以回调函数参数的形式返回. demo:JSONP请求不同端口的数据 ...