溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“原生JS怎么實現分享側邊欄”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“原生JS怎么實現分享側邊欄”吧!
實現效果如下：
以下是代碼實現，方便大家復制粘貼。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>分享到效果</title>
<style>
#share {
position: fixed;
width: 100px;
height: 200px;
background-color: lightblue;
left: -100px;
top: 100px;
}
#share span {
width: 20px;
height: 60px;
line-height: 20px;
text-align: center;
left: 100px;
top: 70px;
position: absolute;
background-color: yellow;
}
</style>
</head>
<body>
<div id="share">
<span>分享到</span>
</div>
<script>
// 獲取元素
var share = document.getElementById("share");
// 將事件設置給share
share.onmouseover = function () {
animate(this, "left", 0);
};
share.onmouseout = function () {
animate(this, "left", -100);
};
// animate運動函數
function animate(tag, attr, target) {
clearInterval(tag.timer);
tag.timer = setInterval(function () {
// 獲取某個屬性的當前狀態
// 由于具有單位，需要取整
// parseInt("hehe") => NaN NaN || 0
// 為了應對auto轉換為NaN的問題，我們使用短路操作，保證程序的健壯性
var leader = parseInt(getStyle(tag, attr)) || 0;
// 緩動公式的一部分是更改step的值
var step = (target - leader) / 10;
// 由offsetLeft在取值的時候會四舍五入，step如果比較小，會造成無法運動的問題
// 根據步數的正負，更改取整方式
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// 緩動公式
leader = leader + step;
// 設置給某一個屬性
tag.style[attr] = leader + "px";
// 檢測是否走到了指定位置
if (leader == target) {
clearInterval(tag.timer);
}
}, 17);
}
// 用于獲取某個標簽的某個樣式屬性值
// 帶單位
function getStyle(tag, attr) {
// 檢測支持哪一個
// box.currentStyle，如果不存在值為undefined
// getComputedStyle如果瀏覽器不支持。相當于變量未聲明，報錯
if (tag.currentStyle) {
// ie支持
return tag.currentStyle[attr];
} else {
// 標準方法
return getComputedStyle(tag, null)[attr];
}
}
</script>
</body>
</html>到此，相信大家對“原生JS怎么實現分享側邊欄”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
