对于特效，这个听过很多见过很多也写过很多，在刚开始学习js的时候，发现了很多好玩的东西，相册的轮播，各种下雨，星空的特效着实吸引了我，后来慢慢的不在关注这些，开始研究js最底层的东西，这些苦涩的底层让我对js有了一个深层次的认知，让我感觉到仿佛从喧嚣的城市回到了静谧的山村，我喜欢这种感觉，眼观不再局限于一些局部，而是感官四面八方，慢慢的探索，悟到了些许的真谛，开始努力去追求完美，什么才是最好的，怎么做才是最好的。
在这里记录一些自己开始时候学习的片段，不再着眼于结果，而是层次，结构。
第一次使用拖拽效果的时候，心中已经有了一个架构，跟写第一个进度条的效果一样，自己设计的模型，很快就通过简单的代码实现了，这不是想当然的事情，这是一种基础累计的过程。慢慢习惯了看见新的事物自己试着去模仿出来，对自己想做的效果，更不用说了，写这些需要的不是倚天屠龙，而是简简单单的刻苦的修炼。
现在我把这个过程叫做忆往昔
拖拽：
或许有些人刚开始使用这个效果的时候觉得很神奇，不同于桌面应用程序，桌面应用程序可以自由的进行拖拽，在web实现中，试着观察桌面应用程序在window窗口中实现的机制很容易就会想到。
简单原理：
默认状态：对对象进行初始化
state=false;
鼠标按下：获取当前对象的坐标，鼠标的坐标，同时激活改变默认状态
当前对象的坐标：objx=obj.style.left
objy=obj.style.top
鼠标的坐标： mousex=event.clientX
mousey=event.clienty
激活默认状态： state=true
鼠标移动：获取此时鼠标的坐标；对坐标进行解析，计算当前对象的坐标
此时鼠标的坐标：nowx=event.clientX
nowy=event.clientY
当前对象的坐标：top=nowx-mousex+objx
left=nowy-mousey+objy
鼠标移出时：重置状态为默认状态
原理着实简单，就可以作出一个简单的拖拽的效果
代码实现：
HTML代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<script type="text/javascript" src="drag1.js"></script>
<style type="text/css">
#test{
width:150px;
height:100px;
background-color:#cc6633;
border:4px red solid;
text-align:center;
font-size:2em}
</style>
</head>
<body>
<div >
<p>this is a gril</p>
</div>
</body>
</html>
javascript代码
var drag=false;
var test;
var mousex,mousey;
var objx,objy;
window.onload=start;
function start(){
test=document.getElementById("test");
test.style.position="relative";
test.style.top= "0px";
test.style.left= "0px";
test.onmousedown=down;
test.onmousemove=move;
test.onmouseup=up;
}
function down(event)
{
drag=true;
var event=event || window.event;
mousex=event.clientX;
mousey=event.clientY;
objy=parseInt(test.style.top);
objx=parseInt(test.style.left);
}
function move(event){
if(drag)
{
var event = event || window.event;
var nowx = event.clientX - mousex + objx;
var nowy = event.clientY - mousey + objy;
test.style.left = nowx + "px";
test.style.top = nowy + "px";
}
}
function up()
{
drag=false;
}