js运动：多div变宽、二级菜单
定时器及运动函数。
多div变宽：
<!--
Author: XiaoWen
Create a file: 2016-12-13 09:36:30
Last modified: 2016-12-13 12:24:18
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js多div变宽</title>
<style>
div{
width: 100px;
height: 40px;
background: #f00;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var a_div=document.getElementsByTagName('div');
console.log(a_div)
var timer=null;
for(var i=0;i<a_div.length;i++){
a_div[i].onmouseover=function(){
startMove(this,400);
};
a_div[i].onmouseout=function(){
startMove(this,100);
};
};
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
};
};
var speed;
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//当目标比自身小时向上，当目标比自身大时向下
//当目标比较大时，会一直加，如果不向上取会少加
//当目标比较小时，会一直减，如果不向上取会少减 //不怕多加，也不怕多减，因为只要到达目标值都会结束运行。
//多加时是正数，向上取才能多
//多减时是负数，向下取才能让负数更大
var speed=(iTarget-parseInt(getStyle(obj,'width')))/8;
if(speed<0){
speed=Math.floor(speed);
}else{
speed=Math.ceil(speed);
};
if(parseInt(getStyle(obj,'width'))==iTarget){
clearInterval(obj.timer);
}else{
obj.style.width=parseInt(getStyle(obj,'width'))+speed+'px';
};
},10);
};
</script>
</body>
</html>
二级菜单：
<!--
Author: XiaoWen
Create a file: 2016-12-13 09:36:30
Last modified: 2016-12-13 16:29:44
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js多div变宽</title>
<style>
*{
margin: 0;
padding: 0;
}
#tag{
height: 40px;
background: #ccc;
}
ul,li{
list-style: none;
}
#tag li{
width: 150px;
height: 40px;
float: left;
background: #ddd;
position: relative;
overflow: hidden;
}
#tag li a{
display: block;
width: 150px;
height: 40px;
}
#tag li div{
width: 150px;
height: 400px;
background: #eee;
}
</style>
</head>
<body>
<div id="box">
<div id="tag">
<ul>
<li>
<a href="#">1</a>
<div>11</div>
</li>
<li>
<a href="#">2</a>
<div>22</div>
</li>
<li>
<a href="#">3</a>
<div>33</div>
</li>
<li>
<a href="#">4</a>
<div>44</div>
</li>
<li>
<a href="#">5</a>
<div>55</div>
</li>
<li>
<a href="#">6</a>
<div>66</div>
</li>
</ul>
</div>
</div>
<script>
var cont=document.getElementById('tag');
var a_li=cont.getElementsByTagName('li');
var a_div=cont.getElementsByTagName('div');
var timer=null;
for(var i=0;i<a_li.length;i++){
a_li[i].onmouseover=function(){
startMove(this,'height',400);
};
a_li[i].onmouseout=function(){
startMove(this,'height',40);
};
};
function startMove(obj,attr,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(iTarget-parseInt(getStyle(obj,attr)))/8;
var speed=speed>0? Math.ceil(speed) : Math.floor(speed);
if(speed==iTarget){
clearInterval(obj.timer);
}else{
obj.style[attr]=parseInt(getStyle(obj,attr))+speed+'px';
};
},50);
};
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
</script>
</body>
</html>
js运动：多div变宽、二级菜单的更多相关文章
- （42）JS运动之多物体框架--多个div变宽
假设仅仅为div加入一个定时器的话.在多个div变宽的时候会发生故障.可是假设为每一个div加入一个定时器.那么就能够实现多个物体变宽. 注意:在多物体运动的情况下,全部东西不能共用.offsetXX ...
- JS实现的简单横向伸展二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 第十五篇 JS 移入移出事件 模拟一个二级菜单
JS 移入移出事件 模拟一个二级菜单 老师演示一个特别简单二级菜单,同学们除了学习JS,还要注意它的元素和CSS样式. 这节课介绍的是JS鼠标移入.移出事件:onmouseover是移入事件,on ...
- JS多物体运动案例：变宽、变高
任务描述: 当鼠标移入"变宽"矩形时,该矩形宽度逐渐增加至400px,移出该矩形,宽度逐渐恢复至初始值;当鼠标移入"变高"矩形时,该矩形高度逐渐增加至400px ...
- 第4天：JS入门-给div设置宽高背景色
今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en&quo ...
- HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利 ...
- JavaScript学习总结【11】、JS 运动
动画效果在网站中是一种非常常见的交互式体验效果,比如侧边栏分享.图片淡入淡出,我们把这种动画效果就叫做运动,也就是让物体动起来.如果想让一个物体动起来,无非就是改变它的速度,也就是改变属性值,比如 l ...
- 第十节 JS运动中级
链式运动框架. 回调函数 运动停止时,执行函数 运动停止时,开始下一次运动 <!DOCTYPE html> <html lang="en"> <hea ...
- JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- linux shell 去重 uniq和sort的区别
sort -u 和 uniq都能起到删除重复信息的功能,那么他们的区别究竟在哪呢?$ cat test jasonjasonjasonfffffjason 下面分别执行三个命 ...
- A 浪哥的烦恼 完全背包dp
https://biancheng.love/contest-ng/index.html#/131/problems 首先,去到n点的最小时间是所有数加起来. 然后,如果我1 --- 2,然后再2-- ...
- php 通过变量 来调用函数
<?php function fun() { echo 'fun'; } $a = 'fun'; $a(); ?> 复制代码 上面的$a变量就是fun()函数,调用$a()和调用fun() ...
- 使用VS，获取SQL SERVER 的链接字符串
在VS中→工具→链接到数据库→(选择数据源,这里要链接的是SQL server)Microsoft SQL Server→服务器名字(不知道的可以在登陆SQL server的时候,把服务器名字复制过来 ...
- C#将Enum枚举映射到文本字符串
介绍 当将以前的C代码移植到C#中时,我快发疯了,因为有很多的数组需要将常量映射到字符串.当我在寻找一个C#的方法来完成的时候,我发现了一个自定义属性和映射的方法. 如何使用代码? 对每一个enum枚 ...
- Bridging signals hdu 1950 （最长上升子序列）
http://acm.split.hdu.edu.cn/showproblem.php?pid=1950 题意:求最长上升(不连续or连续)子序列 推荐博客链接: http://blog.csdn.n ...
- PostGreSQL存储过程
1 返回结果集的存储过程 -- drop FUNCTION getall();CREATE or REPLACE FUNCTION getall() RETURNS SETOF users AS$B ...
- vim 分屏
分屏启动Vim 使用大写的O参数来垂直分屏. vim -On file1 file2 ... 使用小写的o参数来水平分屏. vim -on file1 file2 ... 注释: n是数字,表示分成几 ...
- 【java】：定时任务
PS:转 http://blog.csdn.net/lotusyangjun/article/details/6450421/
- Android之Fragment学习总结（1）
对于Fragment的学习: 近日初步学习了Fragment这以特殊的组件,其依托与一个Activity,与Activity的生命周期息息相关,为其设置的视图只有当其关联到一个Activity才会起效 ...