JS模拟百度分享侧边栏效果
模拟百度分享侧边栏的弹出与滑入效果。当鼠标移入#div1分享侧边栏，#div1分享侧边栏区块匀速滑出直至其全部露出。当鼠标移除#div1分享侧边栏，#div1分享侧边栏区块匀速滑入隐藏，直至恢复初始位置。若#div1区块未全部露出时，鼠标移出，#div1区块则开始滑入隐藏；若#div1区块未全部滑入隐藏，鼠标移入，则div1区块则开始匀速弹出。
<!DOCTYPE html>
<html> <head>
<title>JS运动框架案例：类百度分享制作</title>
<meta charset="UTF-8">
</head>
<style>
#div1 {
width: 150px;
height: 200px;
background: green;
position: absolute;
left: -150px;
top: calc(50% - 100px);
} #div1 span {
width: 20px;
height: 60px;
line-height: 20px;
right: -20px;
top: 70px;
background: blue;
position: absolute; } html,
body {
margin: 0;
padding: 0;
}
</style>
<script> // 补充代码 </script> <body> <div id='div1'>
<span>分享到</span>
</div>
</body> </html>
参考代码：
参考代码（1）以目标点作为参数，如果目标点为0，速度为正，目标点为-150，速度为负。如果运动抵达目标点，那么关闭定时器；否则left值发生变化。
function startMove(iTarget)
{
var oDiv=document.getElementById('div1'); clearInterval(timer);
timer=setInterval(function (){
var speed=0; if(oDiv.offsetLeft>iTarget)
{
speed=-10;
}
else
{
speed=10;
} if(oDiv.offsetLeft==iTarget)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}, 30);
}
参考代码（2）以每次运动的距离作为参数，鼠标移入参数为正，鼠标移除参数为负。
window.onload = function () {
oDiv = document.getElementById('div1');
function startMove(speed) {
var iTarget = null;
clearInterval(oDiv.timer);
oDiv.timer = setInterval(function () {
if (speed > 0) {
iTarget = 0;
} else {
iTarget = -150;
}
var l=Math.abs(iTarget-oDiv.offsetLeft);
var s=Math.abs(speed);
if (l<=s) {
oDiv.style.left=iTarget+'px';
clearInterval(oDiv.timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
}, 30);
}
oDiv.onmouseover = function () {
startMove(10)
}
oDiv.onmouseout = function () {
startMove(-10)
}
}
debug版本：为什么采用如下的代码，在弹出时，最终会多出10px距离？
window.onload = function () {
oDiv = document.getElementById('div1');
function startMove(speed) {
var iTarget = null;
clearInterval(oDiv.timer);
oDiv.timer = setInterval(function () {
if (speed > 0) {
iTarget = 0;
} else {
iTarget = -150;
}
//bug：为什么在弹出时，会多出来10px？
if (speed > 0 && iTarget - oDiv.offsetLeft <= speed) {
oDiv.style.left = iTarget + 'px'
clearInterval(oDiv.timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
if (speed < 0 && iTarget - oDiv.offsetLeft >= speed) {
oDiv.style.left = iTarget + 'px'
clearInterval(oDiv.timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
}, 30);
}
oDiv.onmouseover = function () {
startMove(10)
}
oDiv.onmouseout = function () {
startMove(-10)
}
}
debug代码：
window.onload = function () {
oDiv = document.getElementById('div1');
function startMove(speed) {
var iTarget = null;
clearInterval(oDiv.timer);
oDiv.timer = setInterval(function () {
if (speed > 0) {
iTarget = 0;
} else {
iTarget = -150;
}
//bug：为什么在弹出时，会多出来10px？
/* 编码逻辑错误，应该采用if(){……}else if(){}语法，而不是并列的两个if(){……}else{……}。因为当判断语句【1】执行条件if满足时，同样满足判断语句【2】的else语句代码，导致多出来10px。
*
*/
// 当鼠标移入时，判断语句【1】，如果speed大于0且与目标点距离不大于speed时， oDiv.style.left直接设置为目标点并关闭定时器，否则继续运动。
if (speed > 0 && iTarget - oDiv.offsetLeft <= speed) {
oDiv.style.left = iTarget + 'px';
clearInterval(oDiv.timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
// 当鼠标移出时， 判断语句【2】，如果speed小于0且与目标点距离不大于speed时， oDiv.style.left直接设置为目标点并关闭定时器，否则继续运动。
if (speed < 0 && iTarget - oDiv.offsetLeft >= speed) {
oDiv.style.left = iTarget + 'px';
clearInterval(oDiv.timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
}, 30);
}
oDiv.onmouseover = function () {
startMove(10)
}
oDiv.onmouseout = function () {
startMove(-10)
}
}
JS模拟百度分享侧边栏效果的更多相关文章
- CSS实现模拟百度分享侧边栏效果
在<JS模拟百度分享侧边栏效果>一文中对于Div区块的运动通过JS实现了鼠标移入滑出显示,鼠标移出滑入隐藏的效果.其实在CSS3中通过transition属性就可以较为轻松实现. < ...
- 前端 ---- js 模拟百度导航栏滚动案例
模拟百度导航栏滚动监听 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- Vue.js模拟百度下拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 模拟百度关键字搜索与跳转
测试效果: css样式: ul{ display:none; } html代码: <input type="text" id="text" /> & ...
- 用于模拟百度分享的errno错误代码
0:成功;-1:由于您分享了违反相关法律法规的文件,分享功能已被禁用,之前分享出去的文件不受影响.;-2:用户不存在;请刷新页面后重试;-3:文件不存在;请刷新页面后重试;-4:登录信息有误,请重新登 ...
- js模拟浏览器加载效果 pace.js 中文官方文档
2017年2月20日12:11:25 官网URL:http://github.hubspot.com/pace/docs/welcome/ 文档 http://github.hubspot.com/p ...
- 原生JS模拟百度搜索关键字与跳转
<style type="text/css"> *{ margin: 0; padding: 0; } #text{ width: 300px; height: 30p ...
- JS——模拟百度搜索
注意事项: 1.for循环移除子节点时,其长度是变化的 2.在文档流中,input.img.p等标签与其他标签有3px的距离,利用左浮动,可以消除3px距离 3.背景图片定位时,第一个值是x轴方向的值 ...
- 第一百四十六节，JavaScript，百度分享保持居中--下拉菜单
JavaScript,百度分享保持居中--下拉菜单 百度分享保持居中 效果图 html代码 <div id="share"> <h2>分享到</h2& ...
随机推荐
- ansible-playbook文件结构
ansible-playbook文件结构: 1 --- 2 - name: play1 #指定的playbook名字 3 hosts: webservers #指定主机组 4 remote_user: ...
- CSS语法规范与代码风格
CSS语法规范与代码风格 1. 语法规范 CSS规则又两个主要的部分构成:选择器+一条或多条声明. 选择器:用于指定CSS样式的HTML标签,花括号内的是设置的具体样式 属性与属性值以键值对的形式出现 ...
- Android开发教程之密码框右侧显示小眼睛
现在都说互联网寒冬,其实只要自身技术能力够强,咱们就不怕!我这边专门针对Android开发工程师整理了一套[Android进阶学习视频].[全套Android面试秘籍].[Android知识点PDF] ...
- 编程语言拟人：来自C++、Python、C语言的“傲娇”自我介绍！
软件工程领域,酷爱编程的人很多,但另一些人总是对此避之不及.而构建软件无疑会让所有人压力山大,叫苦连连. 来看看这些流行编程语言的"内心独白",JAVA现实,C++傲娇,Rus ...
- C语言-入门级编程语言--编程小白首选
我们都知道计算机很厉害,利用计算机可以高效地处理和加工信息,随着计算机技术的发展,计算机的功能越来越强大,不但能够处理数值信息,而且还能处理各种文字.图形.图像.动画.声音等非数值信息. 在199 ...
- 生成流水号（20060210－0001）的SQL函数
create table t_sql(id int identity(1,1),code char(13),[name] nvarchar(10)) go create function f_crea ...
- 阿里技术专家十五问，真题面试刀刀见肉，快来和阿里面试官battle
引言 2020阿里巴巴专家组出题,等你来答: 题目:如何判断两个链表是否相交 出题人:阿里巴巴新零售技术质量部 参考答案: $O(n^2)$: 两层遍历,总能发现是否相交 $O(n)$: 一层遍历,遍 ...
- STC 核心板 入门记
写在开始 STC核心板,它的软件十分全面,想要什么都有,非常适合新手入门. 上一次电赛刚结束,现在反正也啥也不太会,干脆学个这个吧. 顺便写篇博客记录一下. 记录第一次烧写 周四下单,周六到货.中午拿 ...
- js工厂函数
经常会遇到工厂函数这个词,不过javascript不是严格的面向对象语言,不像java,C#拥有类,所以工厂函数会变得比较模糊. 简单来讲,就是创建一个可以用来创建实例的函数,这样每一个实例都是独立的 ...
- 重新开始记录java教程
最近在工作上学到了很多的知识和经验,以后每天都来记录给博客园上面