不准时更新的日常,这次我们使用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.οnlοad=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展示。 但是每次刷新页面都会卡一下。看来每次加载一下的效果并不好,看不清可以手动刷新页面。
一下为个人收集的学习资料分享,来源均为互联网,分享给大家。除了学习还有娱乐的,如有侵权,请留言我会马上撤销。
git教程:https://pan.baidu.com/s/1-DJIAi7rqV0zprnEJVW7zQ 提取码:fw2t
一拳超人第一季收藏:https://pan.baidu.com/s/1TL1N2VpfCN06ectJZ5Uimw 提取码:5cql
20个经典java项目附带源码:https://pan.baidu.com/s/1YcOjqRNkscirbJvDXL1VeA 提取码:ll59
2018年Vue2.X快速入门:https://pan.baidu.com/s/1D5MTeiTpvn01aP-F7iKLYQ 提取码:4ylv
程序员追女孩12招 https://www.sebigdata.com/carUsb_1201_6_10.html 附带10G精品教程,链接亲测有效。(皮了下,找女朋友要紧)
Vue 去哪网项目练习:https://pan.baidu.com/s/1AU0u0Z7aeDRvsT80P03gZQ 提取码:k1w6
我知女人心:https://www.sebigdata.com/carUsb_1201_5_10.html 知彼知己了解女性的全部教程。