一个简单的纵横向动画效果类
分享一个简易的动画效果类,思路源于JavaScript DOM编程艺术,这本书是我JavaScript的启蒙书,看过四篇,至今时常翻起.我想也是每个JavaScript初学者的必备书.Mr.Think非常推崇这本书,真的很棒!
思路其实很基础,很简单,主要是通过setTimeout()方法,并利用CSS绝对定位来以改变图片位置以实现动画效果.纯DOM方式编写,兼容所有支持JavaScript的浏览器及其他API.
动画效果类核心JavaScript代码:点此查看DEMO
//@Mr.Think---简易动画类
function moveElem(elemId,final_x,final_y,interval){
if (!document.getElementById) return false;
if (!document.getElementById(elemId)) return false;
var elem=document.getElementById(elemId);
if(elem.movement) clearTimeout(elem.movement);
if(!elem.style.left) elem.style.left="0px";
if(!elem.style.top) elem.style.top="0px";
var xpos=parseInt(elem.style.left);
var ypos=parseInt(elem.style.top);
if(xpos==final_x&&ypos==final_y) return true;
if(xpos<final_x){
var divisor=Math.ceil((final_x-xpos)/10);
xpos=xpos+divisor;
}
if(xpos>final_x){
var divisor=Math.ceil((xpos-final_x)/10);
xpos=xpos-divisor;
}
if(ypos<final_y){
var divisor=Math.ceil((final_y-ypos)/10);
ypos=ypos+divisor;
}
if(ypos>final_y){
var divisor=Math.ceil((ypos-final_y)/10);
ypos=ypos-divisor;
}
elem.style.left=xpos+"px";
elem.style.top=ypos+"px";
var repeatelem="moveElem('"+elemId+"',"+final_x+","+final_y+","+interval+")";
elem.movement=setTimeout(repeatelem,interval);
}
原文发布于Mr.Think的个人博客: http://mrthink.net/javascrip-dom-slide-simple/
function moveElem(elemId,final_x,final_y,interval){
if (!document.getElementById) return false;
if (!document.getElementById(elemId)) return false;
var elem=document.getElementById(elemId);
if(elem.movement) clearTimeout(elem.movement);
if(!elem.style.left) elem.style.left="0px";
if(!elem.style.top) elem.style.top="0px";
var xpos=parseInt(elem.style.left);
var ypos=parseInt(elem.style.top);
if(xpos==final_x&&ypos==final_y) return true;
if(xpos<final_x){
var divisor=Math.ceil((final_x-xpos)/10);
xpos=xpos+divisor;
}
if(xpos>final_x){
var divisor=Math.ceil((xpos-final_x)/10);
xpos=xpos-divisor;
}
if(ypos<final_y){
var divisor=Math.ceil((final_y-ypos)/10);
ypos=ypos+divisor;
}
if(ypos>final_y){
var divisor=Math.ceil((ypos-final_y)/10);
ypos=ypos-divisor;
}
elem.style.left=xpos+"px";
elem.style.top=ypos+"px";
var repeatelem="moveElem('"+elemId+"',"+final_x+","+final_y+","+interval+")";
elem.movement=setTimeout(repeatelem,interval);
}
原文发布于Mr.Think的个人博客: http://mrthink.net/javascrip-dom-slide-simple/
分类:
JavaScript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器