多物体运动

原创 2016年06月02日 11:25:50

<!DOCTYPE html>

<head>
  <title>untitled</title>
  <meta charset="utf-8">
  <style>
*{margin:0;padding:0;}
ul li{list-style:none;}
ul li{
width:200px;
height:100px;
background-color:#CD3278;
margin-bottom:20px;
}
  </style>
  <script>
window.onload=function(){

var ali=document.getElementsByTagName('li');
for(var i=0;i<ali.length;i++){
ali[i].timer=null;
ali[i].onmouseover=function(){
move(this,400);
}
ali[i].onmouseout=function(){
move(this,200);
}
}
}


function move(obj,target){

clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(target-obj.offsetWidth)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==target){
clearInterval(timer);
}
else{
obj.style.width=obj.offsetWidth+speed+'px';
}
},20)
}
  </script>


</head>
<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>

</html>

给块添加border后,效果将不能实现,此时应封装函数来获取样式,如下所示:

<!DOCTYPE html>
<head>
  <title>untitled</title>
  <meta charset="utf-8">
  <style>
*{margin:0;padding:0;}
ul li{list-style:none;}
ul li{
width:200px;
height:100px;
background-color:#CD3278;
margin-bottom:20px;
}
  </style>
  <script>
window.onload=function(){

var ali=document.getElementsByTagName('li');
for(var i=0;i<ali.length;i++){
ali[i].timer=null;
ali[i].onmouseover=function(){
move(this,400);
}
ali[i].onmouseout=function(){
move(this,200);
}
}
}


function move(obj,target){

clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(target-parseInt(getStyle(obj,'width')))/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(parseInt(getStyle(obj,'width'))==target){
clearInterval(timer);
}
else{
obj.style.width=parseInt(getStyle(obj,'width'))+speed+'px';
}
},20)
}
function getStyle(obj, attr){
 if(obj.currentStyle){
  return obj.currentStyle[attr];
 }
 else{
  return getComputedStyle(obj, false)[attr];
 }
}

  </script>


</head>
<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

针对hibernate中一对多,多对一,多对多的概述

department类 private Department parent;//上级部门private Set children = new HashSet();//下级部门private Set u...
  • wt346326775
  • wt346326775
  • 2016年10月24日 21:00
  • 94

mybatis 一对一 一对多 多对一 多对多

association property="user" javaType="com.superr.powerful.progect.user.entity.User">               ...
  • zhenwodefengcaii
  • zhenwodefengcaii
  • 2017年05月04日 16:04
  • 96

MyBatis一对多,多对一,多对多

MyBatis中的一对多和对多一,多对多 主要就是resultMap中 association – 一个复杂的类型关联;许多结果将包成这种类型(一对多) collection – 复杂类型的集合...
  • u010857795
  • u010857795
  • 2017年05月09日 21:15
  • 1396

mybatis一对多 多对一 多对多

MyBatis中的一对多和对多一,多对多 主要就是resultMap中 association – 一个复杂的类型关联;许多结果将包成这种类型(一对多) collection – 复杂类型...
  • JHC_binge
  • JHC_binge
  • 2018年01月16日 11:34
  • 5

Hibernate_03(一对多和多对多)

/** * 回顾: * 表数据和表数据之间可以存在的关系? * 建立关系的好处:对于多表查询关系数据的时候 * 一对多: * 原则:在多的一方建立一个字段当成外键,指向一...
  • java_12_liuxinfei
  • java_12_liuxinfei
  • 2018年01月14日 22:48
  • 14

一对一;一对多;多对多

First (一对一)      首先我来说下一对一的理解,就是一个班主任只属于一个班级,一个班级也只能有一个班主任。好吧这就是对于一对一的理解 怎么来实现呢? 这里我介绍了两种方式...
  • ethan_10
  • ethan_10
  • 2018年01月01日 23:56
  • 12

mysql多对多(转载)

数据库设计多对多关系的几种形态  前言:多对多关系至少需要3个表,我们把一个表叫做主表,一个叫做关系表,另外一个叫做字典表或者副表(字典表是纪录比较少,而且基本稳定的,例如:版块名称;副表是内容比较...
  • JDKANDER
  • JDKANDER
  • 2016年05月12日 15:58
  • 1274

Hibernate多对多双向关联

以Student和Course为例,一个学生可以选多门课程,一门课程也可以被多个学生选取; 持久化类Student: package bean; import java.util.Set; ...
  • jialinqiang
  • jialinqiang
  • 2013年03月21日 11:49
  • 15170

Mybatis中多对多映射详解

Mybatis中多对多映射详解 对于在mybatis中的多对多的处理,其实我们可以参照一对多来解决注意】 注:这是从student这边出发所做的一些操作,从course一边开始操作是一样的,因为俩者...
  • suwu150
  • suwu150
  • 2016年10月23日 22:05
  • 4617

【SSH三大框架】Hibernate基础第八篇:多对多关联关系的操作

Hibernate的多对多关联关系
  • u010800530
  • u010800530
  • 2014年11月17日 16:26
  • 1707
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:多物体运动
举报原因:
原因补充:

(最多只允许输入30个字)