zoukankan      html  css  js  c++  java
  • 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展示。 但是每次刷新页面都会卡一下。看来每次加载一下的效果并不好,看不清可以手动刷新页面。

    一下为个人收集的学习资料分享,来源均为互联网,分享给大家。除了学习还有娱乐的,如有侵权,请留言我会马上撤销。

    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 知彼知己了解女性的全部教程。

  • 相关阅读:
    PAT 1088. Rational Arithmetic
    PAT 1087. All Roads Lead to Rome
    PAT 1086. Tree Traversals Again
    PAT 1085. Perfect Sequence
    PAT 1084. Broken Keyboard
    PAT 1083. List Grades
    PAT 1082. Read Number in Chinese
    求最大公因数
    [转载]Latex文件转成pdf后的字体嵌入问题的解决
    [转载]Matlab有用的小工具小技巧
  • 原文地址:https://www.cnblogs.com/wxhhts/p/9188817.html
Copyright © 2011-2022 走看看