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 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
随机推荐
- 帝国cms7.0调用指定栏目,指定顺序排列
[e:loop={"select * from {$dbtbpre}enewsclass where classid in (82,83,86,87,88,89,90,91,93) orde ...
- mongodb 学习初探
1.去mongodb 官方下载 http://www.mongodb.org/downloads 2.下载php的mongodb扩展 http://files.cnblogs.com/lsl8966/ ...
- poj 1144 Network(割点)
题目链接: http://poj.org/problem?id=1144 思路分析:该问题要求求出无向联通图中的割点数目,使用Tarjan算法即可求出无向联通图中的所有的割点,算法复杂度为O(|V| ...
- 配置hibernate数据库连接
第一步:右键项目->MyEclipse->添加Hibernate组件,指定数据库连接配置如下(src/hibernate.cfg.xml) MySQL对连接的有效期是28800s,一个连接 ...
- asp导航条子菜单横向
示意图:(代码红色部分为主要.) <%@ Master Language="C#" AutoEventWireup="true" CodeFile=&qu ...
- HDU1325 &&poj1308 基础并查集
和上一道小希的迷宫差点儿相同,可是在HDU上提交一直WA,POJ过了 HDU的数据太强了吧,强的我感觉数据有问题 题意:输入若干对点,推断是否是一颗树,转化过来也就是是否存在环 点数-边数=1,还要推 ...
- iOS推送证书p12转成pem
首先你需要导出p12格式的证书,具体操作请参考如下: 其次你就可以通过在控制台输入如下命令即可转换: openssl pkcs12 -in 你导出的p12证书 -out 你要转换的pem证书 -nod ...
- aop切入点表达式
1.切入点表达式:对指定的方法进行拦截,并且生成代理表达式. 2.拦截所有public方法 <aop:pointcut expression="execution(public * * ...
- Java学习之位运算和逻辑运算符
今天看了一下HashMap类的源码,在HashMap的源码中定义了初始空间的大小 static final int DEFAULT_INITIAL_CAPACITY = 1 << 4; 当 ...
- D - D 田忌赛马
D - D 田忌赛马 解题报告 hdu 1052 Tian Ji -- The Horse Racing 链接:http://acm.hust.edu.cn/vjudge/contest/v ...