侧边栏收起展开效果，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 鼠标悬停/离开数据行时 ...
随机推荐
- MySQL操作mysqldump命令详解
--all-databases , -A导出全部数据库. --all-tablespaces , -Y导出全部表空间. --no-tablespaces , -y不导出任何表空间信息. --add-d ...
- Java 问题集
1.命令行编译.java文件,找不到或者无法加载主类,需要配置完整的PATH,CLASSPATH环境变量,CLASSPATH最前面是 点+分号 PATH=%JAVA_HOME%\binCLASSPAT ...
- xcode pod install 安装失败，提示缺少文件
I had the same problem in Xcode 6.1.1. I did the following to solve it: Set the configuration file s ...
- Centos7使用pxe安装KVM虚拟机
Centos7使用pxe安装KVM虚拟机 一.安装服务所需的软件 [root@localhost ~]yum install nginx dhcp vsftpd syslinux -y [root@l ...
- MySQL完整性约束foreign key与表操作。
一 MySQL中表的完整性约束: 我们首先知道约束条件跟类型的宽度一样,都是可选的,也就是说,我们在创建表的时候可以不指定,但是为了创建的表更加的完整,我们一般会加一些约束条件,name下面我们讲一 ...
- BZOJ2560串珠子
/* 很清新的一道题(相比上一道题) g[S]表示该 S集合中胡乱连的所有方案数, f[S] 表示S集合的答案 那么F[S] 等于G[S]减去不合法的部分方案 不合法的方案就枚举合法的部分就好了 g[ ...
- 凸优化&非凸优化问题
转载知乎大神的回答:Robin Shen 参考:https://www.zhihu.com/question/20343349
- python补充3
一单例模式 类:具体相同特征的一类事物,类似于模板 单例:常用的软件设计模式,用于设计一个类中只有一个实例且易于外界访问,可以对实例的个数控制并节约系统资源 运用场景:比如某个服务器程序的配置信息,它 ...
- iOS oc 检测手机移动网络和wifi是否开启
利用Reachability的的一个方法currentReachabilityStatus 获取枚举类型值判断是否为2即可,不是2就不是WiFi. enum { // DDG Netwo ...
- 《算法》第四章部分程序 part 17
▶ 书中第四章部分程序,包括在加上自己补充的代码,无环图最短 / 最长路径通用程序,关键路径方法(critical path method)解决任务调度问题 ● 无环图最短 / 最长路径通用程序 pa ...