原生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+jquery等)
当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会.很多新闻资讯类网站如新浪.网易.CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站. 现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果.就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站.志文工作室调研了几种类似功能的实现方法,摘录之以供参考. 参考一.提
-
javascript实现动态侧边栏代码
总的来说就是利用 鼠标悬停onmouseover 和 鼠标移除onmouseout 这两个时间来完成的. 首先是HTML 结构 复制代码 代码如下: <body><div id="div1"><span>侧边栏</span></div></body> 然后是css的样式: 复制代码 代码如下: #div1{ width:150px; height:200px; background:#999
-
JavaScript实现简单的隐藏式侧边栏功能示例
本文实例讲述了JavaScript实现简单的隐藏式侧边栏功能.分享给大家供大家参考,具体如下: 常见的隐藏式侧边栏,如分享.联系客服等.通过设置速度来实现滑入滑出的动态效果 以下是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net js侧边栏</title> <style type="text/c
-
JavaScript中实现无缝滚动、分享到侧边栏实例代码
废话不多说,直接给大家贴代码了,代码解决一起问题! 下面一段代码给大家介绍js无缝滚动实例代码: 代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&
-
利用js编写响应式侧边栏
为了练手,自己学敲网站时刚好碰到需要制作侧边栏,在网上也查了各种插件以及框架都可以实现这个功能,但是想自己学着用js原生学一个试试,于是就初略完成了侧边栏的实现,可以让初学者参考参考,代码能力有限. 其中主要设计的就是animate()函数,animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如
-
javascript 实现动态侧边栏实例详解
javascript 实现动态侧边栏 总的来说就是利用 鼠标悬停onmouseover 和 鼠标移除onmouseout 这两个时间来完成的. 首先是HTML 结构 <body> <div id="div1"> <span>侧边栏</span> </div> </body> 然后是css的样式: #div1{ width:150px; height:200px; background:#999999; pos
-
JS实现侧边栏鼠标经过弹出框+缓冲效果
可能这个标题起得不够恰当,简单来说就是:当鼠标移到最左侧时,移出一个框. 首先,我们用两个div来简单布局以下页面: <div id="box"> <div id="share">分享到</div> </div> 这个分享框的弹出原理是:把内层div定位到外层div最右侧紧贴,然后把外层div定位到屏幕左外测,left的值与宽度相等,刚好隐藏掉就可以.当鼠标经过时,再通过改变left的值使外层div显示出来. <
-
基于slideout.js实现移动端侧边栏滑动特效
HTML5现在本领太大了,PC端已经无法满足它的胃口了,它将强势攻入移动端,所以移动端中各种特效也得基于HTML5实现,看看我们将要介绍的slideout.js,能帮我们实现怎么样的侧边栏滑动特效呢 先看下运行效果: 一.准备资料 只需要准备slideout.js库即可: https://github.com/Mango/slideout/blob/master/dist/slideout.js 小图标: 二.实现代码 HTML代码: <!doctype html> <html lang
-
JS运动框架之分享侧边栏动画实例
本文实例讲述了JS运动框架之分享侧边栏动画实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">
-
js+css实现全屏侧边栏
本文实例为大家分享了js实现全屏侧边栏的具体代码,供大家参考,具体内容如下 在浏览网站时我们经常会看到一个菜单按钮,点一下就会出现一栏侧边导航栏,直接上代码! HTML部分 <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×&