javascript 广告移动特效的实现代码
2019/6/27 22:18:49
本文主要是介绍javascript 广告移动特效的实现代码,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box2{} .box2{width: 200px; height: 200px; background: red; border-radius: 50%;position: relative;} .box3{width: 800px; height: 500px; border:1px solid red;} </style> </head> <body> <button type="" id="start">开始</button> <button type="" id="stop">停止</button> <div class="box3"> <div id="box" class="box2"> </div> </div> </body> <script type="text/javascript"> var lr=600; var tb=300; var i=0; var j=0; var box=document.getElementById('box'); var start=document.getElementById('start'); var stop=document.getElementById('stop'); start.onclick=function(){ start.style.display='none'; stop.style.display='inline'; var time=setInterval(function(){ box.style.left=i+'px'; box.style.top=j+'px'; if (i>lr) { lr=0; i--; } if(i<=lr){ lr=600; i++; } if (j>tb) { tb=0; j--; } if (j<=tb) { tb=300; j++ } stop.onclick=function(){ clearInterval(time); stop.style.display='none'; start.style.display='inline'; } },5); } </script> </html>
以上就是小编为大家带来的javascript 广告移动特效的实现代码全部内容了,希望大家多多支持找一找教程网~
这篇关于javascript 广告移动特效的实现代码的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-27使用js将ETH账户的资产打散其他账户web3
- 2024-09-27我轻松地将我的 React.js 应用程序翻译成了多种语言。下面是我是如何做到的... ??
- 2024-09-27?? 使用 useMemo 和 useCallback 加速 React:告别缓慢的重新渲染!??
- 2024-09-27Vue CLI多环境配置教程:新手入门指南
- 2024-09-27Vue CLI多环境配置教程:快速入门指南
- 2024-09-27Vue CLI教程:新手入门指南
- 2024-09-27Vue CLI教程:初学者快速入门指南
- 2024-09-27Vue3公共组件教程:入门与实践
- 2024-09-27Vue3公共组件教程:新手入门指南
- 2024-09-27Vue3教程:初学者快速入门指南