点滴积累【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(). ...
随机推荐
- BootstrapValidator
一.引入必要文件 <link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/& ...
- 基于t-io的MI工具实现
原文:https://my.oschina.net/u/2984386/blog/1630300 背景介绍 t-io是一款国产开源的网络编程框架,主要是特点:简单,易上手,AIP封装通俗易懂,适合一般 ...
- FIREMONEY手机虚拟键盘遮挡的解决
FIREMONEY手机虚拟键盘遮挡的解决 尝遍了网上人们提供的N种方法之后,发现还是老猫的方法才是彻底解决问题的办法. 老猫“不看后悔XXX”--->RAD10.2.3 Flying Wang ...
- Go -- php 中的pack("H*", $string) 转换成go
pack("H*", $string) 转化成这样: //16进制字符串转[]byte func HexToByte(hex string) []byte { length := ...
- pycharm的插件pylint报错：java.lang.Throwable: Write-unsafe context! Model changes are allowed from write-safe contexts only. Please ensure you're using invokeLater/invokeAndWait with a correct modality stat
java.lang.Throwable: Write-unsafe context! Model changes are allowed from write-safe contexts only. ...
- Log文件太大，手机ROM空间被占满
客户要装车,进行项目验收了. 今天拿着几台手机去客户处,其中有一台手机从昨天晚上开始就一直开着我们的APP,今天早晨打开手机发现APP没有反应了. 在程序列表中将其杀掉,然后再启动程序,发现程序不能启 ...
- 北邮连接bupt-mobile
内容源自:[伪攻略]电脑(win10)连接BUPT-mobile教程 1.控制面板:控制面板\网络和 Internet\网络连接 右键——属性,记住网络配置器的名字(划线部分) 点击配置——高级——网 ...
- 记一次vue2路由参数传递this指针问题
需要船体一个data()内的对象到另一个页面. <player-card v-for="(note, key) in sortedtNodes" :imgurl=" ...
- 【DataStrcutre】Introduction and description of Binary Trees
[Definitions] Here is the recursive definition of a binary tree: A binary tree is either the empty s ...
- Java 8 Stream 教程
Java 8 Stream Tutorial 本文采用实例驱动的方式,对JAVA8的stream API进行一个深入的介绍.虽然JAVA8中的stream API与JAVA I/O中的InputStr ...