javascript实现简单的动画功能

//在第二个函数positionMessage中设置初始位置与终点,新建html文件是,元素ID为message。

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != ‘function‘) {
        window.onload=func;
}else{
    window.onload = function(){
        oldonload();
        func();
    }
  }
}

function positionMessage() {
    if (!document.getElementById) {return false;}
    if (!document.getElementById("message")) {return false;}
    var elem = document.getElementById("message");
    elem.style.position = "absolute";
    elem.style.left = "50px";
    elem.style.top =  "100px";
    moveElement("message",200,100,10);
}
addLoadEvent(positionMessage);

function moveElement(elementID,final_x,final_y,interval){
    if (!document.getElementById) return false;
    if (!document.getElementById(elementID)) return false;
    var elem=document.getElementById(elementID);
    var xpos=parseInt(elem.style.left);
    var ypos=parseInt(elem.style.top);
    if (xpos == final_x && ypos==final_y) {
        return false;
    }
    if (xpos < final_x) {
        xpos++;
    }
    if (xpos > final_x) {
        xpos--;
    }
    if (ypos < final_y) {
        ypos++;
    }
    if (ypos > final_y) {
        ypos--;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeat = "moveElement(‘"+elementID+"‘,"+final_x+","+final_y+","+interval+")";
    movement = setTimeout(repeat,interval);
}

时间: 2024-08-15 00:48:32

javascript实现简单的动画功能的相关文章

javascript自定义简单map对象功能

这里介绍一种js创建简单map对象的方法: function Map() { //创建object对象, 并给object对象添加key和value属性 var obj1=new Object(); var obj2=new Object(); obj1.key="zhangsan" ; obj1.value=23; obj2.key="lisi"; obj2.value=25; //创建一个数组,将创建的object对象放如到数组中去 var map=new Ar

Javascript之简单按钮搜索功能

<head> <title> new document </title> <meta name="generator" content="editplus" charset="utf-8"/> </head> <body> <form action="http://www.baidu.com/s" target="_blank"&

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

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

JavaScript基础--简单功能的计算器(十一)

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

使用 JavaScript 实现简单候选项推荐功能(模糊搜索)【收藏】【转】

当我们使用 Google 等搜索功能时,会出现与搜索内容有关的候选项.使用 JavaScript 搜索字符串,通常会使用 indexOf 或者 search 函数,但是非常僵硬,只能搜索匹配特定词语.比如使用关键词 今天是星期几 想要检索 今天是星期五 这个内容,就无法实现,虽然它们只有很小的差别. 本文就来介绍一个有趣的算法 编辑距离(Levenshtein Distance),然后用它来实现一个简单的候选项推荐(模糊搜索)功能. 编辑距离(Levenshtein Distance) 简单的说

javaScript的一些奇妙动画

     今天我给大家讲一下JavaScript在实现一些动画时所用的一些方法以及需要注意的地方. 显示与隐藏动画效果 show()方法: show()方法会动态地改变当前元素的高度.宽度和不透明度,最终显示当前元素,此时元素的css属性display恢复为除了none之外的初始值. 其语法结构为:jQuery对象.show(duration,[fn]); 其中要注意当参数duration表示动画效果运行的时间,可以使用关键字slow.normal和fast,分别对应时间长度0.6秒.0.4秒和

如何使用JavaScript控制CSS Animations(动画)和Transitions(过渡)

Zach邮件跟我说,上Stack Overflow这类的论坛,他经常碰到一些关于JavaScript控制CSS 动画的问题,又提供给我几个例子.我很久就打算写一些关于这方面的文章,所以很高兴让Zach提出来并促使我写了这个教程. 有时候WEB开发人员认为CSS的动画比JavaScript的动画更难理解.虽然CSS动画有其局限性,但它的性能比大多数JavaScript库更加高效,因为它可以借助硬件加速啊!其效果绝对可以超出我们的预期. CSS animations和transitions再加上点J

jQuery实现一个简单的购物车功能

最近由于工作需要的原因,开始系统学习jQuery的知识,然后跟着一个视频教程做了一个购物车的功能,现总结如下. 第一步:准备HTML页面,代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.

JavaScript强化教程——jQuery动画

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— jQuery动画 jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画. 语法:$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性. 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒