原生JS实现分享侧边栏
更新时间：2021年10月18日 11:15:24 作者：aiguangyuan
这篇文章主要为大家详细介绍了原生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实现html标签、文本的隐藏、显示、删除及添加的相关资料,需要的朋友可以参考下2023-06-06
本文给大家讲述的是如何使用javascript结合CSS动画来实现一些占用资源更少，更优化的动画效果，思路十分巧妙，这里推荐给小伙伴们参考下。2015-03-03
近来无聊，翻出来大学时候的数据结构教材来看。突然想起，大学时候就想过用js实现基本的排序算法的事情，反正闲来无事，便写出来后记录于此2012-08-08
js 动态添加元素(div、li、img等)及设置属性的方法
下面小编就为大家带来一篇js 动态添加元素(div、li、img等)及设置属性的方法。小编觉得听不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
avalon js实现仿google plus图片多张拖动排序附源码下载
这篇文章主要介绍了avalon js实现仿google plus图片多张拖动排序附源码下载的相关资料,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了基于javascript处理nginx请求过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
展开和收起这样的效果想必大家早就眼熟了吧，利用闲暇时间用js写了一个具体功能：当自己处于全部显示的时候，点击自己的收起，自己收起等等感兴趣的你可以参考下哈2013-03-03
在vue项目中和后台交互获取数据这块,我们通常使用的是axios库,这篇文章主要给大家介绍了关于如何使用TS对axios的进行简单封装的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了原生js自定义右键菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
JavaScript加入收藏夹功能（兼容IE、firefox、chrome）
这篇文章主要介绍了JavaScript加入收藏夹功能，兼容IE、firefox、chrome，并解决了window.sidebar.addPanel is not a function问题,需要的朋友可以参考下2014-05-05
最新评论