侧边栏收起展开效果，onmouseover,onmouseout
//方法一
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分享按钮，展开收起效果（基础原理方法）</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 200px;
height: 200px;
background: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span{
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');//获取对象
oDiv.onmouseover = function(){//给对象绑定事件
startMove();
}
oDiv.onmouseout = function(){
startMove1();
}
}
var timer = null;//声明定时器先为空
function startMove(){
clearInterval(timer);//进入函数执行定时器之前先清除所有的定时器
var oDiv = document.getElementById('div1');
timer = setInterval(function(){
if(oDiv.offsetLeft == 0){ //如果当前对象left值为0也就是已经展开的状态
clearInterval(timer);//那么就清除定时器，也就是停止运动
}else{
oDiv.style.left = oDiv.offsetLeft+10+'px';//否则就从-200一直没个30ms加10像素一直到0为止
}
},30)
}
function startMove1(){//移出函数原理与移入相同
clearInterval(timer);
var oDiv = document.getElementById('div1');
timer = setInterval(function(){
if(oDiv.offsetLeft == -200){//如果对象当前left值为-200也就是收起状态
clearInterval(timer);//那么就清除定时器
}else{
oDiv.style.left = oDiv.offsetLeft-10+'px';//否则就执行元素从0一直减10像素一直到-200为止
}
},30)
}
</script>
</head>
<body>
<div id="div1">
<span id="share">分享</span>
</div>
</body>
</html>
//方法2：将变量拿出作为参数传递，简化为一个函数
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分享按钮，展开收起效果（传参）</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 200px;
height: 200px;
background: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span{
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function(){
startMove(10,0);
}
oDiv.onmouseout = function(){
startMove(-10,-200);
}
}
var timer = null;
function startMove(speed,iTarget){
clearInterval(timer);
var oDiv = document.getElementById('div1');
timer = setInterval(function(){
if(oDiv.offsetLeft == iTarget){
clearInterval(timer);
}else{
oDiv.style.left = oDiv.offsetLeft+speed+'px';
}
},30)
}
</script>
</head>
<body>
<div id="div1">
<span id="share">分享</span>
</div>
</body>
</html>
//方法三 传一个参数：目标值。在进入定时器时就声明速度，如果当前值大于目标值，说明是收起，则速度为-10，如果当前值小于目标值，说明是展开，则速度为10
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分享按钮，展开收起效果（传一个参数）</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 200px;
height: 200px;
background: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span{
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function(){
startMove(0);
}
oDiv.onmouseout = function(){
startMove(-200);
}
}
var timer = null;
function startMove(iTarget){
clearInterval(timer);
var oDiv = document.getElementById('div1');
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)
}
</script>
</head>
<body>
<div id="div1">
<span id="share">分享</span>
</div>
</body>
</html>
分享按钮，展开收起效果（传一个参数）
侧边栏收起展开效果，onmouseover,onmouseout的更多相关文章
- jq与原生js实现收起展开效果
jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...
- css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果
HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...
- CSS扇形展开效果
知识点预备: [1]CSS3中特别重要的transform中的rotate(),现在transform可以将元素进行2D和3D变形. 2D transform常用的transform-function ...
- CSS - toggle collapse 类似bootstrap的展开效果
问题:toggle collapse 类似bootstrap的展开效果(展开一个关闭另一个) Demo:http://jsfiddle.net/JSDavi/L47vscw4/ 方案:使用transi ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- onMouseOver&onMouseOut vs onMouseEnter&onMouseLeave
[onMouseOver&onMouseOut vs onMouseEnter&onMouseLeave] 1.onmouseleave.onmouseenter,鼠标进入到指定元素区 ...
- 一款由jQuery实现的手风琴式相册图片展开效果
之前我们有分享过很多jQuery手风琴样式的菜单,比如CSS3手风琴下拉菜单.今天要分享的jQuery手风琴效果很特别,它是手风琴样式的相册图片展开效果.我们只需点击图片缩略图即可展开当前的图片,并将 ...
- 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
随机推荐
- Redis-Migrate-Tool 使用详解
注意:目前不支持4.0.X及以上的redis使用 Redis 集群迁移工具,基于redis复制,快速,稳定. github链接:https://github.com/vipshop/redis-mig ...
- Java 13 - Java 数组
Java 数组 数组对于每一门编程语言来说都是重要的数据结构之一,当然不同语言对数组的实现及处理也不尽相同. Java语言中提供的数组是用来存储固定大小的同类型元素. 你可以声明一个数组变量,如num ...
- websocket 群聊,单聊,加密,解密
群聊 from flask import Flask, request, render_templatefrom geventwebsocket.handler import WebSocketHan ...
- Java之24种设计模式-UML-模型图解读
Design Patterns 策略模式: 观察者模式: 经典单例模式: private static class AuthenticationHolder { private static fina ...
- CSS3的过渡和转换
CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个 ...
- python－性能测试
目录: 1.timeit 1.1 在命令后调用timeit 1.2 在代码中使用 1.3 创建计时器实例,通过autorange获得循环次数 1.4 Wall时间和CPU时间 2.profile和cP ...
- ELK学习博客
ELK实时日志分析平台环境部署--完整记录 https://www.cnblogs.com/kevingrace/p/5919021.html
- python中的find、rfind、index、rindex
find()从左向右寻找子序列的位置,如存在多个相同子序列只返回第一个查找到的位置,如果子序列不存在返回-1 rfind()从右向左寻找子序列的位置..... index()从左向右寻找子序列的位置, ...
- python中的update
update()批量写入批量更新字典,举个例子: 1 a = { 2 "name":"dlrb", 3 "age":25, 4 " ...
- Apache 服务器 基础知识小结
Apache HTTP Server(简称Apache)是Apache软件基金会的一个开放源码的网页服务器,可以在大多数计算机操作系统中运行,由于其多平台和安全性被广泛使用,是最流行的Web服务器端软 ...