纯JS动画效果实现

2023/09/25 · admin

纯JS实现动画滚动效果。

源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0px; padding:0px;} #box_1{ width:200px; height:150px; background:#03F; position:absolute; left:-200px; top:0px; opacity: 0.4; filter:Alpha(opacity=40);} #box_1 .span_1{ display:block; width:20px; height:30px; position:absolute; right:-20px; top:50%; margin-top:-15px;} </style> </head> <body> <div id="box_1"> <span class="span_1">公告</span> </div> <script language="javascript"> window.onload = function(){ var box_1 = document.getElementById('box_1'); box_1.onmouseover = function(){ start_animate(10,0); } box_1.onmouseout = function(){ start_animate(-10,-200); } } var times = null; function start_animate(spend,iTarget){ //console.log(spend,iTarget); clearInterval(times); var box_1 = document.getElementById('box_1'); times = setInterval(function(){ box_1_l = box_1.offsetLeft; //console.log(box_1_l); if(box_1_l == iTarget){ clearInterval(times); }else{ box_1.style.left = box_1.offsetLeft+spend+'px'; } },30); } </script> </body> </html>

纯JS动画效果实现

相关文章

最新评论

最近发表

网站分类

文章归档