效果:

思路:

首先,利用计时器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. mysql-mmm故障整理

    Auth: JinDate: 20140414 1.master-slave同步问题1)故障描述和错误代码:监控报警slave故障登录slave服务器查看mysql> show slave st ...

  2. Elasticsearch 5.5.1的安装和入门教程(转)

    说明:转自老阮的文章,业界最简单的入门教程.一切的安装的运行建议不要用root权限,最好是当前用户下的权限. 作者: 阮一峰 日期: 2017年8月17日 全文搜索属于最常见的需求,开源的 Elast ...

  3. 利用Visual Studio Natvis 框架简化C++的变量调试工作

    相信用C++开发过UI界面的程序员都对其变量调试工作头痛不已,由于复杂的继承关系,要查看到某个变量往往需要一系列的层层深入的点击,如下图就是查看TextBox的Text的例子: 为了查看Text属性, ...

  4. android源码包下载

    http://rgruet.free.fr/public/ 其他下载地址:http://cid-b50f9d5897331c44.office.live.com/browse.aspx/Android ...

  5. 用javac编译整个j2ee项目

    转自:http://www.blogjava.net/zhyiwww/archive/2011/10/13/361145.html 我们做项目,可能会使用ant做系统集成和部署.其实ant在编译项目时 ...

  6. Jquery JS 正确的比较两个数字大小的方法

    if(2 > 10){ alert("不正确!");} 此比较不会是想要的结果:它相当于2 >1,把10的第一位取出来比较. 解决方 法:  if(eval(2) &g ...

  7. Git 学习(一)简介及安装

    Git 简介及安装 Git是目前世界上最先进的分布式版本控制系统(没有之一).它的诞生也颇具传奇,Linux创始人Linus花了两周时间自己用C写了一个分布式版本控制系统,这就是Git!有兴趣的话,可 ...

  8. [转]SSIS: By coding

    本文转自:http://www.codeproject.com/Articles/604197/SSIS-By-coding Introduction SSIS better known as “SQ ...

  9. tensorflow c++接口的编译安装与一些问题记录

    参考这篇文章安装,依次安装bazel,protocbuf,eigen3,然后下载tensorflow源码,编译c++ api,将编译结果拷贝到搜索路径 最后测试案例时遇到一些问题 (1)fatal e ...

  10. 003java面试笔记——【java基础篇】从团八百失败面试总结的java面试题(未完待续)

    8.java 线程     1)线程概念,线程与进程      线程:线程是“进程”中某个单一顺序的控制流.也被称为轻量进程.线程是进程中的实体,一个进程可以拥有多个线程,一个线程必须有一个父进程.线 ...