效果：

思路：

首先，利用计时器setInterval实现DIV的隐藏显示功能，然后在进行一个判断，之后在把要移动的相应距离进行一个参数传递，再根据参数判断出移动的方向也就是offsetLeft移动的方向，是正或者是负。最后利用onmouseover和onmouseout，实现DIV的事件。

代码：

 <head runat="server">

     <title></title>

     <style type="text/css">

         div

         {

             width: 200px;

             height: 300px;

             background: #FF0000;

             position: absolute;

             left: -200px;

         }

         div span

         {

             width: 30px;

             height: 90px;

             background: #00FF00;

             position: absolute;

             right: -30px;

             top: 100px;

             text-align: center;

         }

     </style>

     <script type="text/javascript">

         window.onload = function () {

             var oDiv1 = document.getElementById('div1');

             oDiv1.onmouseover = function () {

                 shareMove(0);

             }

             oDiv1.onmouseout = function () {

                 shareMove(-200);

             }

         };

         var timer = null;

         function shareMove(end) {

             var oDiv1 = document.getElementById('div1');

             var speed = 0;

             if (oDiv1.offsetLeft < end) {       //根据DIV的offsetLeft距离判断DIV所要走的正负方向

                 speed = 10;

             }

             else {

                 speed = -10;

             }

             clearInterval(timer);           //在一个setInterval开始之前都要先清除之前的setInterval

             timer = setInterval(function () {

                 if (oDiv1.offsetLeft == end) {      //根据参数判断DIV要走的距离

                     clearInterval(timer);

                 }

                 else {

                     oDiv1.style.left = oDiv1.offsetLeft + speed + 'px'      //DIV要走的距离

                 }

             }, 30);

         }

     </script>

 </head>

 <body>

     <div id="div1">

         <span>青苹果分享</span>

     </div>

 </body>

点滴积累【JS】---JS小功能（JS实现隐藏显示侧边栏，也就是分享栏的隐藏显示）的更多相关文章

  1. JS类小功能

    工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...

  2. js实现小功能 动态赋值

  3. 常用小功能js函数-函数防抖

    函数防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时.这个我经常用到/** * 函数防抖 * fun 需要延时执行的函数 * delayTime 延时时间 * **/export ...

  4. js/jq 小功能函数

    1.点击复制内容到剪贴板 function copyToClip(str) { var save = function(e) { e.clipboardData.setData('text/plain ...

  5. js实现小时钟,js中Date对象的使用?

    介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...

  6. js小功能整理

    /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [检测是否含有的字符串] * @return ...

  7. js小功能记录

    个人日常中遇到的js小功能记录,方便查看. /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [ ...

  8. js模仿微信语音播放的小功能

    自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,,  代码如下: <!DOCTYPE html> <html lang="en&qu ...

  9. 网站开发---js与java实现的一些小功能

    记录一下网站开发过程中的一些小功能 1.js获取当前年份: <span>Copyright © 2017-<script>document.write( new Date(). ...

随机推荐

  1. java使用HttpClient 发送get、pot请求

    package eidolon.messageback.PostUtil; import java.io.BufferedReader; import java.io.IOException; imp ...

  2. [ Android Memory] MAT查看图片资源

    参考: http://stackoverflow.com/questions/12709603/mat-eclipse-memory-analyzer-how-to-view-bitmaps-from ...

  3. Ceph源码解析：CRUSH算法

    1.简介 随着大规模分布式存储系统(PB级的数据和成百上千台存储设备)的出现.这些系统必须平衡的分布数据和负载(提高资源利用率),最大化系统的性能,并要处理系统的扩展和硬件失效.ceph设计了CRUS ...

  4. unity pbr

    https://disney-animation.s3.amazonaws.com/library/s2012_pbs_disney_brdf_notes_v2.pdf 参数

  5. SQL server数据库的链接以及增删改查的操作

    1.添加引用using System.Data;using System.Data.SqlData;2.建立于数据库的连接,建议将它做成一个方法,方便多次利用.string sqlconnection ...

  6. MySQL数据库如何导入导出

    1 点击任意一个数据库,然后点击导出,导出为SQL格式,其他一切保持默认(不要勾选"添加 DROP TABLE/DROP VIEW") 2 勾选"另存为文件"点 ...

  7. python fabric使用 http://fabric-chs.readthedocs.io/zh_CN/chs/tutorial.html

    fab -u username -p password  -H hostname -P -- cmd   或root@'hostname'  -H多个主机是引号用逗号隔开 -P异步

  8. 从零開始开发Android版2048 （三）逻辑推断

    近期工作比較忙,所以更新的慢了一点,今天的主要内容是关于Android版2048的逻辑推断,经过本篇的解说,基本上完毕了这个游戏的主体部分. 首先还是看一下,我在实现2048时用到的一些存储的数据结构 ...

  9. iNode协议再次分析

    iNode协议再次分析 声明: 1)本报告由博客园bitpeach撰写,版权所有,免费转载,请注明出处,并请勿作商业用途. 2)若本文档内有侵权文字或图片等内容,请联系作者bitpeach删除相应部分 ...

  10. JavaScript | 数据属性与访问器属性

    属性类型 数据属性 - 包含一个数据值的位置,可以读取和写入值 [writable] 是否能修改属性的值 true [enumerable] 是否通过for in 循环返回属性(是否可以被枚举) tr ...