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 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
随机推荐
- jquery的extend()函数
extend()是在写插件的过程中常用的方法,该方法有一些重载原型. 1.该方法的原型是: extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3.. ...
- 调不尽的内存泄漏，用不完的Valgrind
调不尽的内存泄漏,用不完的Valgrind Valgrind 安装 1. 到www.valgrind.org下载最新版valgrind-X.X.X.tar.bz2 2. 解压安装包:tar –jxvf ...
- 2014 android毕设代做 代做Android毕设 安卓毕设
近期略有闲暇. 看到部分老友帮忙做毕业设计. 一来能够锻炼下小技能,二来能够得点零花小钱. 心遂小动.跃跃欲试. 毕设这件事情,个人觉得还是自己做的好. 只是每一个人都有各种各样的原因不能自己完毕. ...
- hdu1867之KMP
A + B for you again Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- Live Writer Test
测试下LiveWriter写CNblog: 1.Source code plug-in: @Override public List getAll(String orgid,String start, ...
- 不可不知的HTML优化技巧
如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript.图像优化.服务器配置,文件压缩或是调整CSS. 很显然HTML 已经达到了一个瓶颈,尽管它是开发Web 界面必备的核心语言 ...
- Difference between LINQ to SQL and LINQ to Entity（DataContext and DbContext）
http://msdn.microsoft.com/en-us/library/cc161164.aspx http://stackoverflow.com/questions/2443836/wha ...
- spring的常用配置
bean.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http ...
- char*与char[]
char *s1="hello"; // 指向常量区 char s2[]="hello"; // 指向数组的内存空间 char *s1 的s1是指针,指 ...
- Win7/8在用账户密码登录时, 设置成保留用户名, 只输入密码
修改注册表, 0表示保留用户名. 1表示每次都需要输入用户名密码. 位置: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersio ...