js实现简单的动画效果之移动

不准时更新的日常,这次我们使用javaScript实现一个简单的动画移动效果,其思路想法很简单,就是采用“CSS DOM”,对元素的位置进行改变。然后使用setTimeout()函数,对改变位置的函数进行反复调用,让文字或图片进行移动,行成动画效果。

废话不多说,直接上code:

这是HTML:

<body>

<p id="message">
逝者如斯夫,不舍昼夜。
</p>

<script src="js/initPosition.js"></script>
<script src="js/onload.js"></script>
<script src="js/动画/donghua.js"></script>
<script src="js/final.js"></script>
<script src="js/动画/jishu.js"></script>
</body>

这是initPosition:   其作用就是获取元素的初始化位置。

function initPos(){

var elem=document.getElementById("message");     //获取id message
elem.style.color="#"+randomColor();    //这是自己定义的随机颜色函数,后面会上代码。
elem.style.position="absolute";     //DOM定义样式,位置等
elem.style.left="30px";
elem.style.top="50px";
moveElement("message",500,500,10); //欲知详情请往下看

}

这是onload.js: 页面加载完成后调用inipos()函数

window.onload=function(){
initPos();
}

这是donghua.js 也就是实现文字或图片移动的关键

function moveElement(elementID,final_x,final_y,interval){  //参数分别为id选择器的值,x 轴上目的位置,y轴上目的位置,函数执行的时间间隔

var elem=document.getElementById(elementID); //获取id,此处也即是message

var xpos=parseInt(elem.style.left); //获取初始,采用parsInt函数,将字符串变成数字。为什么要换成数字?原因是我们要将这个位置与目的位子进行比较
var ypos=parseInt(elem.style.top);

if(xpos<final_x){  //位置比较,如果这个元素的位置小于目的位置,那么这个元素初始位置增加,
xpos++;
}
if(xpos>final_x){ //如果这个位置大于目的位置,那么初始位置 --“”
xpos--;
}
if(ypos>final_y){
ypos--;
}
if(ypos<final_y){
ypos++;
}
if(xpos==final_x&&ypos==final_y){  //咳咳,这个下面会说,可以接着往下看
final();
}
elem.style.left=xpos+"px";  //上面我们为了与目的位置进行比较而将初始位置变成数字,这样我们是无法改变元素样式的,所以我们这里加上"px";
elem.style.top=ypos+"px";

var repeat="moveElement(‘"+elementID+"‘,+"+final_x+","+final_y+","+interval+")"; //把函数赋给变量,方便下面的书写使用,不然setTimeOut里面放一长串的代码,看起来是很痛苦的。
movment=setTimeout(repeat,interval); // setTImeout()函数,其意思是间隔interval(参数)时间调用一次repeat(函数,此处函数为moveElement()函数);
}

这是final.js  :

function final(){
location.reload(); //o(╥﹏╥)o,为了反复看动画移动,我这里很粗暴的直接实现了页面刷新。。。
}

function randomColor(){
var color=Math.ceil(Math.random()*1700).toString(16);  //随机颜色函数,改变文字颜色,让文字动画看起来更明显。
return color;
}

效果可以查看:https://runjs.cn/detail/gzxxneoo

暂时将代码放到run.js展示。 但是每次刷新页面都会卡一下。看来每次加载一下的效果并不好,看不清可以手动刷新页面。

原文地址:https://www.cnblogs.com/wxhhts/p/9188817.html

时间: 2024-10-10 16:48:12

js实现简单的动画效果之移动的相关文章

Animate.css+js实现鼠标经过动画效果

动画效果可以参照animate.css 注:图片默认是不动的,当鼠标经过的时候才会动.原理很简单--通过js,添加鼠标经过事件,鼠标经过时,把当前元素存放在"data-in"里的"swing"添加到class里,前提animated这个类一定要加上,要不然动画不起作用. 1.引入animate.css <link href="https://cdn.bootcss.com/animate.css/3.5.1/animate.min.css"

tween.js可生成平滑动画效果的js动画库

tween.js是一款可生成平滑动画效果的js动画库.tween.js允许你以平滑的方式修改元素的属性值.它可以通过设置生成各种类似CSS3动画效果.相关的jquery插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween.js允许你以平滑的方式修改元素的属性值.你只需要告诉tween你想修改什么值,以及动画结束时它的最终值是什么,动画花费多少时间等信息,tween引擎就可以计算从开始动画点到结束动画点之间值,来产生平滑的动画效

定时器 + 简单的动画效果

1.向下滑动 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>向下滑动</title> 6 <style> 7 body { 8 margin: 0px; 9 } 10 #show { 11 width: 200px; 12 /* 高度为 0 */ 13 height: 1

一个简单hover动画效果

HTML: <div id="demo1" class="demo">demo1</div> <div id="demo2" class="demo">demo2</div> CSS: .demo { width: 100px; height: 100px; text-align: center; line-height: 100px; border: 10px solid #c

代码:一个简单css3动画效果demo

四行文字会逐次掉落: <style type="text/css"> @-webkit-keyframes fadeInDown1 { 0% { -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); opacity: 0; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } .div1

利用tween,使用原生js实现模块回弹动画效果

最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容ie7,只能说是无缘了 后来,利用jq的animate也能够实现,但是不知道怎么回事 当滚回去时有延迟,好几秒后才能隐藏不见. 最终使用tween能够完美实现,只能说原生js的强大了. tween其实是一个函数库,里面都是些公式,比如说运动轨迹的算数公式. 实现效果:其实就是一个小方块弹啊弹. 首先给

js:简单的拖动效果

效果演示:https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/ html: <div class="wrap"> <div id="boxmove" style="left:150px;top:150px;"> movebox </div> </div> css #boxmove{ position: absolute; width: 200px;

js实现简单的日历效果(兼容IE5 )

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="1.css"/> <script src="jquery-1.11.3.min.js"></

用javascript实现简单的动画效果的一个小实例

一.主要功能介绍:打开页面时文字会动态的从上面滑下来.下面的箭头链接会自动闪烁. 二.实时视图如下: 三.原代码如下 <!DOCTyPE html> <head> <script src="js/jquery-2.1.4.min.js"></script> <script> setInterval("changeImage()",2000);//定时函数 /*下面的为一个自定意函数*/   function