侧边栏收起展开效果，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 鼠标悬停/离开数据行时 ...
随机推荐
- UE4如何检测目标在锥形视野内
转自:http://blog.csdn.net/l346242498/article/details/70237083 做UE4游戏AI方面经常会遇到一个问题,就是何如判定目标在AI单位的视野范围内, ...
- Java基础知识_毕向东_Java基础视频教程笔记(26 反射)
Java反射机制: 是在运行状态中,对于任意一个类(class)文件,都能够知道这个类的所有属性和方法,对于任意一个对象,都能够调用它的任意一个方法和属性.这种动态获取的信息以及动态调用对象的方法的功 ...
- javascript-回归原生基础
//添加事件监听兼容函数 function addHandler(target, eventType, handler){ if(target.addEventListener){//主流浏览器 ad ...
- Python 画3D图像
绘制一副3D图像 draw3D(X,Y,Z, angle) import numpy as np from matplotlib import pyplot as plt from mpl_toolk ...
- js第四天学习小结：
(1)函数的四种形式小结: 无参无返回值 function tellstory(){ console.log("从前有座山"); console.log(" ...
- solr 打分和排序机制(转载)
以下来自solr in action. 包含: 词项频次.查询词项出现在当前查询文档中的次数. 反向文档频次.查询词项出现在所有文档总的次数. 此项权重. 标准化因子: 字段规范: 文档权重. 字段权 ...
- CF1017G The Tree
/* 这是什么神仙题目QAQ 首先考虑在序列上的问题 先不考虑修改成白色, 一个白点能r被染成黑色 意味着能够找到一个l使得在l-r中的操作1次数大于等于 r - l + 1 我们把初始值覆盖成-1就 ...
- mongo数据库的安装与使用
下载mongoDB安装包.https://pan.baidu.com/s/1cvSJtc 默认安装.会在系统盘的program Files文件夹下法相一个MongoDB的文件夹,这个就是软件安装的位置 ...
- StanFord ML 笔记 第一部分
本章节内容: 1.学习的种类及举例 2.线性回归,拟合一次函数 3.线性回归的方法: A.梯度下降法--->>>批量梯度下降.随机梯度下降 B.局部线性回归 C.用概率证明损失函数( ...
- [UGUI]图文混排(三)：资源管理
1.图文混排中的资源,主要是图片. 2.所谓的资源管理,可以分为资源对象池和资源加载这两部分.这里是为图文混排单独做一套资源管理,当然也可以改为调用项目中的资源管理. RichTextResource ...