没有合适的资源?快使用搜索试试~ 我知道了~
前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究。在这篇博文中我们只介绍简单的匀速运动、简单的缓冲运动和简单的多物体运动后面我们还会介绍任意值变化的运动、链式运动、同时运动,同时我们还会简单的封装一个运动插件并且还会将Javascript方法和jquery方法进行比较。 1、简单的匀速运动 下面我们介绍一个demo,鼠标移入,动画向右移动(即隐藏部分显示);鼠标离开,动画向左运动(继续隐藏)整个过程都是匀速的。有了前面回到顶部效果作为基础,这里主要讲解重要部分,先来看看代码: <!DOCTYPE html> <html> <hea
资源推荐
资源详情
资源评论
Javascript动画效果(动画效果(1))
前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究。在这篇博文中我们只介绍简单的
匀速运动、简单的缓冲运动和简单的多物体运动后面我们还会介绍任意值变化的运动、链式运动、同时运动,同时我们还会简
单的封装一个运动插件并且还会将Javascript方法和jquery方法进行比较。
1、简单的匀速运动、简单的匀速运动
下面我们介绍一个demo,鼠标移入,动画向右移动(即隐藏部分显示);鼠标离开,动画向左运动(继续隐藏)整个过程都
是匀速的。有了前面回到顶部效果作为基础,这里主要讲解重要部分,先来看看代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style type="text/css">
body,div,span{
margin: 0px;
padding: 0px;
}
#div1{
width: 200px;
height: 200px;
background: red;
position: relative;
left: -200px;
}
#share{
width: 20px;
height: 40px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
<script type="text/javascript">
//一进来就加载
window.onload = function(){
//获取div
var oDiv = document.getElementById('div1');
//鼠标移入时执行函数
oDiv.onmouseover = function(){
startMove();
}
//鼠标移出时执行函数
oDiv.onmouseout = function(){
startMove1();
}
}
//定义一个定时器
var timer = null;
function startMove(){
//让它一进来的时候就把计时器清掉,避免后面引入多个计时器
clearInterval(timer);
var oDiv = document.getElementById('div1');
//插入一个定时器
timer = setInterval(function(){
// oDiv.style.left = oDiv.offsetLeft+10+'px';
// //offsetLeft 当前left的值
// //此时运行的结果为鼠标移上去后,一直在动,此时需要if进行判断
if(oDiv.offsetLeft == 0){
//当当前的left值为0的时候,清空计时器
clearInterval(timer);
}
else{
//当当前的left值不为0的时候,进行移动
oDiv.style.left = oDiv.offsetLeft+10+'px';
}
},30)
}
function startMove1(){
clearInterval(timer);
var oDiv = document.getElementById('div1');
timer = setInterval(function(){
资源评论
weixin_38537541
- 粉丝: 6
- 资源: 892
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功