原生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>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。