模拟百度分享侧边栏的弹出与滑入效果。当鼠标移入#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模拟百度分享侧边栏效果的更多相关文章

  1. CSS实现模拟百度分享侧边栏效果

    在<JS模拟百度分享侧边栏效果>一文中对于Div区块的运动通过JS实现了鼠标移入滑出显示,鼠标移出滑入隐藏的效果.其实在CSS3中通过transition属性就可以较为轻松实现. < ...

  2. 前端 ---- js 模拟百度导航栏滚动案例

    模拟百度导航栏滚动监听 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  3. Vue.js模拟百度下拉框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. js 模拟百度关键字搜索与跳转

    测试效果: css样式: ul{ display:none; } html代码: <input type="text" id="text" /> & ...

  5. 用于模拟百度分享的errno错误代码

    0:成功;-1:由于您分享了违反相关法律法规的文件,分享功能已被禁用,之前分享出去的文件不受影响.;-2:用户不存在;请刷新页面后重试;-3:文件不存在;请刷新页面后重试;-4:登录信息有误,请重新登 ...

  6. js模拟浏览器加载效果 pace.js 中文官方文档

    2017年2月20日12:11:25 官网URL:http://github.hubspot.com/pace/docs/welcome/ 文档 http://github.hubspot.com/p ...

  7. 原生JS模拟百度搜索关键字与跳转

    <style type="text/css"> *{ margin: 0; padding: 0; } #text{ width: 300px; height: 30p ...

  8. JS——模拟百度搜索

    注意事项: 1.for循环移除子节点时,其长度是变化的 2.在文档流中,input.img.p等标签与其他标签有3px的距离,利用左浮动,可以消除3px距离 3.背景图片定位时,第一个值是x轴方向的值 ...

  9. 第一百四十六节，JavaScript，百度分享保持居中--下拉菜单

    JavaScript,百度分享保持居中--下拉菜单 百度分享保持居中 效果图 html代码 <div id="share"> <h2>分享到</h2& ...

随机推荐

  1. .net core中的那些常用的日志框架（NLog篇）

    前言 咱们上回讲到,.net core中内置的Logging日志框架的使用,以及浅显的讲解,接下来,给大家介绍一个第三方日志框架(NLog). NLog简介 NLog是适用于各种.NET平台(包括.N ...

  2. mysql update 子查询作为条件

    UPDATE t_commission_template tctJOIN ( SELECT max(id) maxid FROM t_commission_template WHERE taken_m ...

  3. 使用Python学习win32库进行内存读写

    前言: 上一周,在52的精华帖中,看到有位大佬用Python制作了鬼泣5的修改器,看完才知道,原来Python也可以对内存进行操作,出于对技术的好奇,看完以后,决定自己也尝试一下. 要用到的工具: C ...

  4. 【Xshell】xshell6强制升级修改！

    使用sublime text打开nslicense.dll文件,把0f86 8100 0000 33c0 68fe 0100 0050 6689中的0f86 8100修改为0f83 8100然后保存即 ...

  5. Monkey常用操作

    原文:https://www.cnblogs.com/lauren1003/p/6193277.html 一.Monkey测试原理:Monkey是Android中的一个命令行工具,可以运行在模拟器里或 ...

  6. 【Linux教程】Linux系统零基础编程入门，想当大神？这些你都要学

    ✍ 文件和文件系统 文件是Linux系统中最重要的抽象,大多数情况下你可以把linux系统中的任何东西都理解为文件,很多的交互操作其实都是通过文件的读写来实现的. 文件描述符 在Linux内核中,文件 ...

  7. 【博弈论】51Nod 1534 棋子游戏

    题目内容 波雷卡普和瓦西里喜欢简单的逻辑游戏.今天他们玩了一个游戏,这个游戏在一个很大的棋盘上进行,他们每个人有一个棋子.他们轮流移动自己的棋子,波雷卡普先开始.每一步移动中,波雷卡普可以将他的棋子从 ...

  8. spring boot:spring security给用户登录增加自动登录及图形验证码功能(spring boot 2.3.1)

    一,图形验证码的用途? 1,什么是图形验证码? 验证码(CAPTCHA)是"Completely Automated Public Turing test to tell Computers ...

  9. git tag的应用

    一,git的tag是什么? tag就是给commit起一个容易记忆容易理解的名字 说明:架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectfores ...

  10. 第二十七章 Linux系统管理之定时任务

    一.定时任务概述 1.含义:设定某个日期或时间周期性执行指令. 2.crond # 守护进程 分钟级别 rond是Linux系统中用来定期执行命令或脚本的一种服务软件,一般情况下,我们安装完CentO ...