学习笔记 JavaScript 动画

结果

代码里用到的图片

<html><head><style>#imageDiv {height: 100px;width: 100px;top: 50px;left: 60px;position: absolute;overflow: hidden;border: 1px solid blue;}li {list-style: none;float: left;padding: 5px;}</style><script>window.onload = function() {var image = document.getElementById("image");image.style.top = "0px";image.style.left = "0px";image.style.position = "absolute";var aList = document.getElementsByTagName("a");var index = new Array();for (var i = 0; i < aList.length; i++) {index[aList[i].innerHTML] = -(i + 1);aList[i].onmouseover = function() {moveImage("image", index[this.innerHTML], 5);}}}function moveImage(element, num, interval) {var image = document.getElementById(element);var target_left =  parseInt(image.style.left);if (target_left == (num * 100)) {return true;}if (target_left > (num * 100)) {target_left--;}if (target_left < (num * 100)) {target_left++;}image.style.left = target_left + "px";var repeat = "moveImage('" + element + "', " + num + ", " + interval + ");";setTimeout(repeat, interval);}</script></head><body><ul><li><a href="">DOG</a></li><li><a href="">CAT</a></li><li><a href="">FISH</a></li></ul><div id="imageDiv"><img src="all.png" alt="all.png" id="image"></img></div></body>
</html>

学习笔记 JavaScript 动画相关推荐

学习笔记 JavaScript 动画加速
学习笔记 JavaScript 动画加速效果代码中用到的图片 <html><head><style>#imageDiv {position: absolute ...
HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读评论(0) 收藏举报分类: JavaScr ...
android学习笔记---55_frame动画的实现，Java技术qq交流群：JavaDream：251572072
android学习笔记---55_frame动画的实现,Java技术qq交流群:JavaDream:251572072 Java技术qq交流群:JavaDream:251572072 2013/5/1 ...
unity2D学习笔记-角色动画
unity2D学习笔记-角色动画角色移动动画效果(重点!!!!!) 创建:Animator与Animation 状态转换跳跃从fall到idle Hierarchy中创建一个Sprite作为载 ...
Mr.J-- jQuery学习笔记(十七)--动画淡入淡出弹窗广告
之前写过动画的隐藏与显示:Mr.J-- jQuery学习笔记(十四)--动画显示隐藏动画隐藏与显示的一个小demo--对联广告:Mr.J-- jQuery学习笔记(十五)--实现页面的对联广告展开 ...
重学前端-学习笔记-JavaScript对象
说明重学前端是程劭非(winter)在极客时间开的一个专栏,在此主要整理我的学习笔记.如有侵权,请联系我,谢谢. javascript对象特征对象具有唯一标识性:完全相同的两个对象,也不是同一个对 ...
前端学习笔记——JavaScript进阶
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.JavaScript 面向对象 1. 面向对象编程介绍 1.1 两大编程思想 1.2 面向过程编程 1.3 面向对 ...
Direct-X学习笔记--骨骼动画
学了几个月DX了,终于到了骨骼动画这一步了,好激动!之前导入过一些静态的模型,还是挺帅的.不过不能动,实在是太遗憾了.今天学习了骨骼动画,终于让偶的模型动起来啦!!! 一.简介说到动画,其实本人又想 ...
【Unity 学习笔记】动画组件和动画控制器
动画是一款游戏不可缺少的一部分.在Unity中,我们可以直接使用Unity自带的动画系统来制作我们想要的动画,其操作相当便捷. 帧动画是2D像素游戏的主流,我将以帧动画为例记录我最近学习动画系统的一些 ...

学习笔记 JavaScript 动画

学习笔记 JavaScript 动画相关推荐

最新文章

热门文章