Javascript物体运动（单物体运动）
2017-09-06 00:00
337 查看
摘要: Javascript物体运动（单物体运动）
Javascript物体运动（单物体运动）
//侧边栏分享示例<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动动画效果</title>
<style>
*{margin:0px;padding: 0px;font-size: 14px;clear: both;}
#div1{
width: 200px;
height: 200px;
background-color: red;
opacity: 0.3;
filter:alpha(opacity:30);//设置图层透明度
left: -200px;
position: relative;
top: 0px;
}
#share{
width: 20px;
height: 50px;
background-color: blue;
font-family: '微软雅黑';
position: absolute;
left: 200px;
text-align: center;
top: 75px;
}
</style>
<script>
/**
* 描述物体进行运动的状态
* @return {startMove(itarget);} 运动函数
*/
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function(){
startMove(0);
}
oDiv.onmouseout = function(){
startMove(-200);
}
}
//获取id
function getdiv(){
var oDiv = document.getElementById('div1');
}
var timer = null;
function startMove(itarget,fn){
var oDiv = document.getElementById('div1');
// getdiv();
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(oDiv.offsetLeft > itarget){
speed = -10;
}else if(oDiv.offsetLeft < itarget){
speed = 10;
}else{
speed = 0;
}
oDiv.style.left = oDiv.offsetLeft + speed +'px';
}, 30);
}
</script>
</head>
<body>
<div id="div1"><span id='share'>分享</span></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Javascript 多物体运动的实现
- JavaScript物体运动三
- 42、JavaScript的运动----多个物体同时运动
- Javascript 多物体运动——逐行分析代码，让你轻松了解运动的原理
- Javascript物体运动（单物体运动）
- javascript动画特效 多物体运动 源代码
- 201509010 javascript事件-多物体运动
- javascript学习-原生javascript的小特效（多物体运动效果）
- javascript多物体运动实现方法分析
- JavaScript多物体运动一
- JavaScript多物体运动及函数封装
- javascript动画效果之多物体缓冲运动
- Javascript 多物体运动——逐行分析代码，让你轻松了解运动的原理
- JavaScript运动框架（三）：多物体任意值运动
- Javascript运动概念2——多物体运动框架
- javascript多物体运动实现方法分析
- JavaScript多物体运动二
- javascript运动框架多物体运动---1
- JavaScript多物体运动三
- JavaScript物体运动一