首页 > 代码库 > js笔记----(运动)分享 隐藏/显示
js笔记----(运动)分享 隐藏/显示
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> body, div { padding:0px; margin:0px; } #box{ height:300px; width:200px; background-color:#ccc; position:absolute;left:-200px; margin-top:200px;border:1px solid #ffd800; border-radius:6px;} #box span{ height:85px; width:40px; position:absolute;left:200px; top:103px; line-height:40px; font-size:20px; background-color:yellow; font-weight:bold; text-align:center; border-radius:6px; border:1px solid #ffd800;} </style> <script type="text/javascript"> window.onload = function () { var oDiv = document.getElementById(‘box‘); oDiv.onmouseover = function () { StarMove(0); } oDiv.onmouseout = function () { StarMove(-200); } } var timer = null; function StarMove(Targer) { var iSpeed = 0; var oDiv = document.getElementById(‘box‘); clearInterval(timer); if (oDiv.offsetLeft < Targer) { iSpeed = 10; } else { iSpeed = -10; } timer = setInterval(function () { if (oDiv.offsetLeft == Targer) { clearInterval(timer); } else { oDiv.style.left = oDiv.offsetLeft + iSpeed + ‘px‘; } }, 30); } </script></head><body> <div id="box"> <span>分享</span> </div></body></html>
js笔记----(运动)分享 隐藏/显示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。