js学习笔记 -运动框架(一)
来源:互联网 发布:网络机顶盒看直播软件 编辑:程序博客网 时间:2024/05/29 16:06
停止定时器只是说明下次就不执行了,但本次还会执行
运动框架:
1在开始运动时关闭定时器
2把运动和停止隔开
<!DOCTYPE html>
<html>
<head>
<style>
#content {background-color: #7f7f7f;width:200px;height: 300px;position:absolute;left:-200px;}
#shareBtn {background-color: yellow;width:30px;height: 90px;position:absolute;left:200px;top:85px;text-align:center;line-height:30px;}
</style>
<title>share</title>
</head>
<body>
<div id="content">
<span id="shareBtn" >分享到</span>
</div>
<script type="text/javascript">
window.onload=function()
{
var content=document.getElementById('content');
content.onmouseover=function()
{
share();
}
content.onmouseout=function(){
shareleave();
}
}
var timer=null;
function share(){
var content=document.getElementById('content');
clearInterval(timer);
timer=setInterval(function(){
if(content.offsetLeft==0)
{
clearInterval(timer);
}
else
{
content.style.left=content.offsetLeft+10+'px';
}
},30)
}
function shareleave(){
var content=document.getElementById('content');
clearInterval(timer);
timer=setInterval(function(){
if(content.offsetLeft==-200)
{
clearInterval(timer);
}
else
{
content.style.left=content.offsetLeft-10+'px';
}
},30)
}
</script>
</body>
</html>
- js学习笔记 -运动框架(一)
- js 运动框架(一)匀速运动
- Js测试框架学习笔记(一)
- js运动-完美运动框架
- js运动--同时运动框架
- [学习笔记]JavaScript基础--完美运动框架
- 学习JS运动透明度变化笔记
- JS链式运动框架
- JS-运动框架
- js 运动框架
- JS运动框架
- JS运动基础框架
- JS完美运动框架
- 万能JS运动框架
- JS运动框架
- JS运动框架
- JS之运动框架
- JS完美运动框架
- [数据结构] HDU5812 Distance
- CodeForces 689C Mike and Chocolate Thieves
- MySQL之Field 'email' doesn't have a default value问题
- Java_Pro4_回收探究_08_10
- 百度2017年暑期实习生笔试题——单词接龙(有向欧拉图)
- js学习笔记 -运动框架(一)
- Error:warning: Ignoring InnerClasses attribute for an anonymous inner class
- HashCode的分析
- for循环结构常用实例介绍
- 初中数学学习笔之-七年级总结
- 控制台输出中文乱码问题
- unity开发之矩阵变换
- Java对Map排序
- DOM(四)DOM中的‘距离’