html代碼

<div id="parent"><span>分享到</span> </div>

css代碼

* {margin: 0;padding: 0;}#parent {width: 200px;height: 200px;background: #ccc;position: absolute;left: -200px;}#parent > span {position: absolute;left: 200px;background: pink;height: 80px;padding-top: 20px;top: 40px;width: 30px;text-align: center;}

JS代碼

var oPar = document.getElementById("parent");var timer = null;oPar.onmouseover = function () {move1(this)};oPar.onmouseout = function () {move2(this)};function move1(obj) {clearInterval(timer);timer = setInterval(function () {var l = 0;l += 5;if (obj.offsetLeft >= 0) {clearInterval(timer);} else {obj.style.left = obj.offsetLeft + l + 'px';}}, 30)}function move2(obj) {clearInterval(timer);timer = setInterval(function () {var l = 0;l -= 5;if (obj.offsetLeft <= -200) {clearInterval(timer);} else {obj.style.left = obj.offsetLeft + l + 'px';}}, 30)}

總結

以上是生活随笔為你收集整理的分享到JavaScript实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。