侧边栏收起展开效果，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 鼠标悬停/离开数据行时 ...
随机推荐
- Hibernate QBC
QBC查询: Query By Criteria 使用面向对象的方式查询 和HQL单表查询相似,但不包含别名查询和具名查询 1 全表查询 Criteria ce = session.createC ...
- js基本方法
Math.random() 日期时间函数(需要用变量调用):var b = new Date(); //获取当前时间b.getTime() //获取时间戳b.getFullYear() //获取年份b ...
- QQ聊天字体选择
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- if 判断语句
if 条件:if语句块当条件成立的时候会执行if语句块, 如果条件不成立. 不执行语句块的内容 例: money = int(input("请输入你兜里的钱:")) # 300 i ...
- excel 获取提取数字
=MID(A2,MIN(FIND({0,1,2,3,4,5,6,7,8,9},A2&"0123456789")),2*LEN(A2)-LENB(A2)) 第一,如果需要提取 ...
- [转]asp＋oracle分页
PageSize:每页显示的记录数.PageCount:根据用户设定好的PageSize和表中的总记录数,系统自动算出总页数.RecordCount:表中的总记录数.AbsolutePage:表示当前 ...
- t default] Failed to discover available identity versions when contacting http://ahswj-cloud-controller:35357. Attempting to parse version from URL.: ConnectFailure
2018-09-13 21:39:20.778 80758 WARNING keystoneauth.identity.generic.base [req-ea24b7ad-5aee-44b2-b68 ...
- Wed Jul 04 18:01:38 CST 2018 WARN: Establishing SSL connection without server's identity verification is not recommended
Wed Jul 04 18:01:38 CST 2018 WARN: Establishing SSL connection without server's identity verificatio ...
- SVG：中国地图
中国地图 <svg height="578" version="1.1" width="718" xmlns="http:/ ...
- vmware使用vsphere的镜像
vsphere镜像导出后可以使用vmware station打开, vsphere镜像导出时需要关机,否则会提示失败,有文件不能导出.