wplnancy wplnancy

## Move
 function animate(obj,target){
        clearInterval(obj.timer);  // 先清除定时器
        var speed = obj.offsetLeft < target ? 15 : -15;  // 用来判断 应该 +  还是 -
        obj.timer = setInterval(function() {
            var result = target - obj.offsetLeft; // 因为他们的差值不会超过5
            obj.style.left = obj.offsetLeft + speed + "px";
            if(Math.abs(result)<=15)  // 如果差值不小于 5 说明到位置了
            {
                clearInterval(obj.timer);
                obj.style.left = target + "px";  // 有5像素差距   我们直接跳转目标位置

## 样式与缓冲运动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; border:1px solid black;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//原本希望变小，结果宽度变大了，原因就是边框的问题   offsetWidth=width+border

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div {width:100px; height:100px; background:red; margin:10px; filter:alpha(opacity:30); opacity:0.3;}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">

## StartMove Version 05
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;

## 不为人知的小数
var a=3;
var b=3.00000000000000000001;
alert(a==b);//true
</script>


计算一下  0.07*100   答案是后面跟着一堆的小数
          0.03*100出乎你的意料

          所以在计算透明度的时候我们最后得到的小数要转化一下  parseInt()   这样鼠标移入移出就不会闪

## 伸缩菜单-同时淡入淡出
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
* {margin:0; padding:0;}
#ul1 li {width:100px; height:20px; line-height:20px; text-align:center; position:relative; float:left; list-style:none; background:#9F3; border:1px solid #660;}
#ul1 li div {background:#CCC; overflow:hidden; position:absolute; top:20px; width:100%; height:0; filter:alpha(opacity:0); opacity:0;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

## 方向可控移入暂停
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
* {margin:0; padding:0;}
#div1 {position:relative; border:1px solid black; width:680px; height:132px; margin:10px auto; overflow:hidden;}
#div1 ul {position:absolute; left:0;}
#div1 ul li {list-style:none; float:left; width:150px; height:112px; padding:10px;}
#div1 ul li img {width:150px;}
</style>

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
* {margin:0; padding:0;}
#ul1 {width:300px; height:300px; border:1px solid black; margin:10px auto;}
#ul1 div {list-style:none; border-bottom:1px dashed #999; padding:2px; overflow:hidden; filter:alpha(opacity:0); opacity:0;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

## 布局转换，相对定位->绝对定位
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
* {margin:0; padding:0;}
#ul1 {width:366px; margin:0 auto; position:relative;}
#ul1 li {list-style:none; width:100px; height:100px; background:#CCC; border:1px solid black; float:left; margin:10px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

## 弹性运动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; top:50px; left:0;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var iSpeed=0;
	function animate(obj,target){
	clearInterval(obj.timer); // 先清除定时器
	var speed = obj.offsetLeft < target ? 15 : -15; // 用来判断应该 + 还是 -
	obj.timer = setInterval(function() {
	var result = target - obj.offsetLeft; // 因为他们的差值不会超过5
	obj.style.left = obj.offsetLeft + speed + "px";
	if(Math.abs(result)<=15) // 如果差值不小于 5 说明到位置了
	{
	clearInterval(obj.timer);
	obj.style.left = target + "px"; // 有5像素差距我们直接跳转目标位置
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<style>
	#div1 {width:100px; height:100px; background:red; border:1px solid black;}
	</style>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	<script type="text/javascript">
	//原本希望变小，结果宽度变大了，原因就是边框的问题 offsetWidth=width+border
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<style>
	div {
	width: 100px;
	height: 100px;
	background-color: pink;
	var a=3;
	var b=3.00000000000000000001;
	alert(a==b);//true
	</script>


	计算一下 0.07*100 答案是后面跟着一堆的小数
	0.03*100出乎你的意料

	所以在计算透明度的时候我们最后得到的小数要转化一下 parseInt() 这样鼠标移入移出就不会闪