js运动原理
来源:互联网 发布:淘宝代销图片怎么编辑 编辑:程序博客网 时间:2024/05/17 08:11
#div1{
width: 200px;
height: 200px;
background: red;
position:absolute;
top: 50px;
left:0;
overflow: hidden;
}
img{
width: 200px;
height: 200px;
}
#div2{
width: 200px;
height: 30px;
position: absolute;
top: -30px;
left: 0;
background: blue;
}
</style>
</head>
<body>
<div id="div1">
<img src="20.jpg">
<div id="div2">
<p id="p1">jdlfalfjljflorueoreorllj</p>
</div>
</div>
<script type="text/javascript">
var oDiv=document.getElementById("div1");
var p1Timer=null;
oDiv.onmouseover=function(){
var oDiv2=document.getElementById("div2");
//oP.style.top="0px";
clearInterval(p1Timer);
p1Timer=setInterval(function(){
if(oDiv2.offsetTop>30){
clearInterval(p1Timer);
}
else{
oDiv2.style.top=oDiv2.offsetTop+5+"px";
}
},30);
}
oDiv.onmouseout=function(){
//oP.style.top="-40px";
clearInterval(p1Timer);
p1Timer=setInterval(function(){
var oDiv2=document.getElementById("div2");
if(oDiv2.offsetTop<-40){
clearInterval(p1Timer);//清理
}
else{
oDiv2.style.top=oDiv2.offsetTop-5+"px";//做运动
}
},30);
}
/* var oDiv1Timerid=null;
var oBt=document.getElementById("bt1");
oBt.onclick= function () {
var oDiv=document.getElementById("div1");
//1. 启动定时器之前,需要清理之前的定时器。
clearInterval(oDiv1Timerid);
//启动定时器,并记录返回值(定时器的标识)
oDiv1Timerid=setInterval(function(){
//做运动的部分 和 清理定时器的部分, 放在 if else 里面
if(oDiv.offsetLeft>600){
//清理定时器的 条件 。要注意边界判断!
clearInterval(oDiv1Timerid);
}
else{
oDiv.style.left=oDiv.offsetLeft+9+"px";
}
/!* if(oDiv.offsetLeft>300-9)
{//最后一步的时候,直接到目标值
oDiv.style.left="300px";
}
else{
oDiv.style.left=oDiv.offsetLeft+9+"px";
}*!/
},30);
}
var oBt2=document.getElementById("bt2");
oBt2.onclick= function () {
var oDiv=document.getElementById("div1");
clearInterval(oDiv1Timerid);
oDiv1Timerid=setInterval(function(){
if(oDiv.offsetLeft<0){
clearInterval(oDiv1Timerid);
}
else{
oDiv.style.left=oDiv.offsetLeft-9+"px";
}
/!* if(oDiv.offsetLeft>300-9)
{//最后一步的时候,直接到目标值
oDiv.style.left="300px";
}
else{
oDiv.style.left=oDiv.offsetLeft+9+"px";
}*!/
},30);
}*/
</script>
width: 200px;
height: 200px;
background: red;
position:absolute;
top: 50px;
left:0;
overflow: hidden;
}
img{
width: 200px;
height: 200px;
}
#div2{
width: 200px;
height: 30px;
position: absolute;
top: -30px;
left: 0;
background: blue;
}
</style>
</head>
<body>
<div id="div1">
<img src="20.jpg">
<div id="div2">
<p id="p1">jdlfalfjljflorueoreorllj</p>
</div>
</div>
<script type="text/javascript">
var oDiv=document.getElementById("div1");
var p1Timer=null;
oDiv.onmouseover=function(){
var oDiv2=document.getElementById("div2");
//oP.style.top="0px";
clearInterval(p1Timer);
p1Timer=setInterval(function(){
if(oDiv2.offsetTop>30){
clearInterval(p1Timer);
}
else{
oDiv2.style.top=oDiv2.offsetTop+5+"px";
}
},30);
}
oDiv.onmouseout=function(){
//oP.style.top="-40px";
clearInterval(p1Timer);
p1Timer=setInterval(function(){
var oDiv2=document.getElementById("div2");
if(oDiv2.offsetTop<-40){
clearInterval(p1Timer);//清理
}
else{
oDiv2.style.top=oDiv2.offsetTop-5+"px";//做运动
}
},30);
}
/* var oDiv1Timerid=null;
var oBt=document.getElementById("bt1");
oBt.onclick= function () {
var oDiv=document.getElementById("div1");
//1. 启动定时器之前,需要清理之前的定时器。
clearInterval(oDiv1Timerid);
//启动定时器,并记录返回值(定时器的标识)
oDiv1Timerid=setInterval(function(){
//做运动的部分 和 清理定时器的部分, 放在 if else 里面
if(oDiv.offsetLeft>600){
//清理定时器的 条件 。要注意边界判断!
clearInterval(oDiv1Timerid);
}
else{
oDiv.style.left=oDiv.offsetLeft+9+"px";
}
/!* if(oDiv.offsetLeft>300-9)
{//最后一步的时候,直接到目标值
oDiv.style.left="300px";
}
else{
oDiv.style.left=oDiv.offsetLeft+9+"px";
}*!/
},30);
}
var oBt2=document.getElementById("bt2");
oBt2.onclick= function () {
var oDiv=document.getElementById("div1");
clearInterval(oDiv1Timerid);
oDiv1Timerid=setInterval(function(){
if(oDiv.offsetLeft<0){
clearInterval(oDiv1Timerid);
}
else{
oDiv.style.left=oDiv.offsetLeft-9+"px";
}
/!* if(oDiv.offsetLeft>300-9)
{//最后一步的时候,直接到目标值
oDiv.style.left="300px";
}
else{
oDiv.style.left=oDiv.offsetLeft+9+"px";
}*!/
},30);
}*/
</script>
0 0
- js运动原理
- js运动原理2
- js运动-链式运动
- js运动-同时运动
- js运动-弹性运动
- js运动-碰撞运动
- js运动-运动缓冲
- js缓冲运动、弹性运动、碰撞运动
- js运动-多物体运动
- js运动-完美运动框架
- js运动(2)----缓冲运动
- js运动--同时运动框架
- js运动技术--缓冲运动
- 运动检测原理
- 运动控制原理
- js图片自由运动
- JS实现抛物线运动
- JS链式运动框架
- sdsdaas
- uva 116 Unidirectional TSP
- 【项目源码】- 【模仿知乎日报】模仿知乎日报
- shop++ 4.0系统 一对多,多对一 ,多对多关系配置(个人心得和一些见解)
- namespace 的使用
- js运动原理
- ImageMagick爆高危命令执行漏洞
- bzoj3223 文艺平衡树 treap
- shop++ JPA 注解详解
- markdown编译器
- 如何正确使用开源项目?
- 排序算法
- 机器学习实践指南(三)—— 算法的调试
- [剑指offer]数组中只出现一次的数字