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 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
随机推荐
- js限制图片的大小
<form id="financialForm" action="<%=basePath%>riskcontrol/website/review_bor ...
- thinkphp phpexcel导入
上次做了一个基于tp3.2.3的phpexcel导出,这次是phpexcel导入,准备材料phpexcel(不知道下载地址的查看我上一篇博文),虽说是基于thinkphp3.2.3来的,也只不过是引入 ...
- javamail发送二进制流附件的问题
最近做个邮件发送功能,要内嵌图片并有附件. 需求很奇怪,图片和附件文件是放在ftp服务器上的,查了下javamail的文档. 添加附件方法如下 MimeBodyPart messageBodyPart ...
- NHibernate 的 ID 标识选择器
在 Hibernate 中,每个对象需要一个标识 ID,通过这个标识 ID 建立对象与数据库中记录的对应关系. Nhibernate 提供了多种方式来建立这个 POID.基于不同的生成策略,可以选择更 ...
- JavaEE Tutorials (9) - 运行持久化示例
9.1order应用118 9.1.1order应用中的实体关系119 9.1.2order应用中的主键121 9.1.3实体映射到多个数据库表125 9.1.4order应用中的层叠操作125 9. ...
- 开源项目live555学习心得
推荐:伊朗美女找丈夫比找工作难女人婚前一定要看清三件事 × 登录注册 疯狂少男-IT技术的博客 http://blog.sina.com.cn/crazyboyzhaolei [订阅][手机订 ...
- VC编程之设置客户区背景图片
在很多系统中出于美观的需要常常要设置背景图片.下面我介绍一种在客户区设置背景图片的简单方法. 1 ．将背景bmp 图片导入到工程,资源ID 这里假设为 IDB_BITMAP1 2 ．在视图类添加如下代 ...
- C++之sort函数
C++中的sort函数可以直接完美地取代Pas中十多行的快排代码,在这里,总结一下sort函数的用法: 首先是不加参数的情况: #include<cstdio> #include<a ...
- JAVA GUI学习 - JSplitPane分屏组件学习
public class JSplitPaneKnow extends JFrame { JSplitPane jSplitPane; JPanel jPanelRed; JPanel jPanelB ...
- AndroidStudio项目移植到Eclipse
原文件结构: 在AndroidStudio中 main目录对应eclipse中的src目录 可以看看每个文件夹下的目录 没有src或者main这些文件夹的都可以删掉 我这里只有app下的东西是需要留着 ...