点滴积累【JS】---JS小功能（JS实现隐藏显示侧边栏，也就是分享栏的隐藏显示）
效果：
思路：
首先，利用计时器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实现隐藏显示侧边栏，也就是分享栏的隐藏显示）的更多相关文章
- JS类小功能
工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...
- js实现小功能 动态赋值
- 常用小功能js函数-函数防抖
函数防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时.这个我经常用到/** * 函数防抖 * fun 需要延时执行的函数 * delayTime 延时时间 * **/export ...
- js/jq 小功能函数
1.点击复制内容到剪贴板 function copyToClip(str) { var save = function(e) { e.clipboardData.setData('text/plain ...
- js实现小时钟,js中Date对象的使用?
介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...
- js小功能整理
/** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [检测是否含有的字符串] * @return ...
- js小功能记录
个人日常中遇到的js小功能记录,方便查看. /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [ ...
- js模仿微信语音播放的小功能
自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,, 代码如下: <!DOCTYPE html> <html lang="en&qu ...
- 网站开发---js与java实现的一些小功能
记录一下网站开发过程中的一些小功能 1.js获取当前年份: <span>Copyright © 2017-<script>document.write( new Date(). ...
随机推荐
- Word中插入英文格式的算法流程
如图上部分所示,需要序号自动编号,那么插入一个一行一列的的表格,然后点击编号,使得项目自动编号,编号一个就在后面输入一些内容,按enter后第二行开始自动编号,如果要缩进,不能按Tab,Tab自动创建 ...
- cas协议，以及tomcat搭建cas服务器
1. CAS 简介 1.1. What is CAS ? CAS ( Central Authentication Service ) 是 Yale 大学发起的一个企业级的.开源的项目,旨 ...
- maven的几个重要配置文件pom.xml、settings.xml；Maven打包生成包含所有依赖的jar包
一个java项目通过maven自动下载依赖时,会涉级读取三个配置文件,分别是项目下的pom.xml 文件 .用户家目录下的.m2/settings.xml 与 maven 全局配置settings.x ...
- dcm4che tools 之dicomdir
1.在dcm4che-3.3.7目录下的bin文件夹下运行命令行窗口 运行以下命令: dcmdir -c E:\TEMP\DICOMDIR E:\TEMP\04E439CE 为E:\TEMP\04E4 ...
- Cannot generate SSPI context
请在参考如下文章前,重启服务器解决! 相信我 没错的! http://support.microsoft.com/kb/811889
- [Python爬虫] 之十五：Selenium +phantomjs根据微信公众号抓取微信文章
借助搜索微信搜索引擎进行抓取 抓取过程 1.首先在搜狗的微信搜索页面测试一下,这样能够让我们的思路更加清晰 在搜索引擎上使用微信公众号英文名进行“搜公众号”操作(因为公众号英文名是公众号唯一的,而中文 ...
- Hibernate连接MySQL
1 下载hibernate-3.6.0 Final.zip到任意目录,解压缩后得到hibernate目录 2 下载slf4j-1.7.13.zip到任意目录,解压缩后得到slf4j-1.7.13 3 ...
- 分享一个基于ligerui的系统应用案例ligerRM V2(权限管理系统)(提供下载)
阅读目录 简介 系统特色 系统介绍 - 首页 系统介绍 - 列表页 系统介绍 - 明细页(表单) 系统介绍 - 菜单/按钮 系统介绍 - 权限中心 系统介绍 - 数据权限 系统介绍 - 字段权限 系统 ...
- 转： 加快Android编译速度
转: http://timeszoro.xyz/2015/11/25/%E5%8A%A0%E5%BF%ABandroid%E7%BC%96%E8%AF%91%E9%80%9F%E5%BA%A6/ 加快 ...
- Windows下如何替换鼠标指针
鼠标指针替换(应用)教程美化 讲解如何替换鼠标指针,从网上下载的鼠标指针该怎么替换呢?认真看完下边的就会了!鼠标指针常见的文件格式为:.cur..ani两种格式.还可能有的是.exe 格式如果是exe ...