对于特效,这个听过很多见过很多也写过很多,在刚开始学习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 id="test"> <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; }