发布于 2017-01-23 09:35:03 | 57 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


匀速运动的效果想必大家都有见到过吧,在本文为大家介绍下使用JS是如何实现的,感兴趣的朋友不要错过
 
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>匀速运动演示</title> 
<style type="text/css"> 
<!-- 

#div1 {width:1px;height:200px;background-color: black;position:absolute;left:100px;top:70px;float:left} 
#div1 span {position:absolute;top:-15px} 
#div2 {width:1px;height:200px;background-color:midnightblue;position:absolute;left:800px;top:70px;float: left} 
#div2 span {position:absolute;top:-15px} 
#div3 {width:1px;height:200px;background-color:fuchsia;position:absolute;left:300px;top:70px;float: left} 
#div3 span {position:absolute;top:-15px} 
#div4 {width:1px;height:200px;background-color:darkmagenta;position:absolute;left:500px;top:70px;float: left} 
#div4 span {position:absolute;top:-15px} 
#grap {width:200px;height:200px;background:red;position:absolute;left:300px;top:74px;float: left;} 
input {width:100px;margin-left: 90px;} 
--> 
</style> 
<script type="text/javascript"> 
var timeId 
function startMove(target){ 
var oDiv=document.getElementById('grap') 
clearInterval(timeId); //这个地方就是为了防止多次点击速度加快的现象,很重要 
speed=oDiv.offsetLeft<target?8:-9; 
timeId=setInterval(function(){ 
if(Math.abs(oDiv.offsetLeft-target)<=6){ 
oDiv.style.left=target+'px'; //只要矩形移动到接近到目标点处就直接移动到目标点上,肉眼无法察觉速度变化 
clearInterval(timeId); document.title="目标"+oDiv.style.left; 
} 
else{ 
oDiv.style.left=oDiv.offsetLeft+speed+'px'; 
} 
},30); 
} 
</script> 
</head> 
<body> 
<div id="div1"><span>100px</span></div> 
<div id="div2"><span>800px</span></div> 
<div id="div3"><span>300px</span></div> 
<div id="div4"><span>500px</span></div> 
<input type="button" value="移动到100px处" onclick="startMove(100)"/> 
<input type="button" value="移动到300px处" onclick="startMove(300)"/> 
<input type="button" value="移动到500px处" onclick="startMove(500)"/> 
<input type="button" value="移动到800px处" onclick="startMove(800)"/> 
<div id="grap" ></div> 

</body> 
</html> 


最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务