这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这里面做了一个 JavaScript 的求爱小特效,效果如下: 不仅能出现下面的图的效果,还可以让这个图形跟随着鼠标转动哦,这里面只是一个简单的没有修饰的小例子,基于这个例子可以让求爱,更加好玩了。闷骚男们,是不是可以给你的小萝莉发个这样的网页啊。给力的。
本文做了一个 JavaScript 的求爱小特效,不仅能出现下面的图的效果,还可以让这个图形跟随着鼠标转动哦, 需要的朋友可以参考下
贴上 code 吧:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Insert title here</title>
- <style type="text/CSS">
- body{
- border:1px red solid;
- width:1000px;
- height:1000px;
- margin:0px auto;
- padding:0px;
- color:green;
- }
- /*
- 将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于
- 其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则
- 依据 body 对象。而其层叠通过 z-index 属性定义
- */
- div{
- position:absolute;
- }
- </style>
- <script type="text/javascript">
- //为什么要用onload,因为我在javascript代码中初始化时钟的div时,调试页面发现没有实现
- //后来发现原因,html的代码是从前往后解析的。当先解析到JavaScript代码的时候,向body中
- //添加子节点的时候,找不到还未解析的body。所以应该先解析body的啦。方法有两种,一种就是下
- //的写法,另一种也可以是在body标签中添加onload方法。
- window.onload=function(){
- init();
- };
- //定义一个div数组,来存储12个div
- //因为12个div位置上的关系,所以先确定一下圆点和半径,以便计算div的位置
- var divs=[];
- var loveBaby=["我","爱","你","!","宝","贝","你","爱","我","吗","勉","勉"]
- var CX=300;
- var CY=300;//----------------------网页中的位置坐标没有单位吗?
- var R=150;
- var divCenterNode;//中心点的位置要进行控制,设置全局变量
- //定义一个初始化的函数
- function init(){
- //创建一个中心点位置的div(可以写上求爱对象哦)
- divCenterNode=document.createElement("div");
- divCenterNode.innerHTML="婷婷,嫁给我吧!";
- document.body.appendChild(divCenterNode);
- divCenterNode.style.left=(CX-50)+"px";
- divCenterNode.style.top=(CY-30)+"px";
- //创建12个div组成一个禁止的时钟,放在body中
- for(var x=1;x<=12;x++){
- //创建div
- var divNode=document.createElement("div");
- divNode.innerHTML=loveBaby[x-1];
- //body对象不需要和其它对象一样去获取,js库中已经封装好了。
- document.body.appendChild(divNode);
- divs.push(divNode);
- }
- //每次启动startClock()对div元素进行重新定位
- /*
- 实际上要想达到旋转的效果,需要不断的进行偏移,或者说
- 进行重新定位,但是作循环,不能控制间隔多久启动函数,那么
- 这时候window对象提供了方法。
- */
- startClock();
- }
- //div的偏移量
- var offset=0;//度数偏移量
- //将位置的定位和转动单独定义一个函数
- function startClock(){
- for(var x=1;x<=12;x++){
- var div = divs[x-1];
- //每一个数字的度数
- var dushu=30*x+offset;
- // 角度值 * Math.PI /180 = 弧度值
- var divLeft = CX+R*Math.sin(dushu*Math.PI/180);
- div.style.left=divLeft+"px";
- var divTop = CY-R*Math.cos(dushu*Math.PI/180);
- div.style.top=divTop+"px";
- }
- offset+=50;
- //间隔一定的时间,回调这个函数
- //经过指定毫秒值后计算一个表达式。第一个参数是表达式,第二个参数是时间
- setTimeout(startClock,80);//window对象的方法
- }
- //定义这个时钟随着鼠标移动到不同的位置
- function clockMove(event){
- CX=event.clientX;//鼠标所在位置的x坐标
- CY=event.clientY;//鼠标所在位置的y坐标
- divCenterNode.style.left=(CX-50)+"px";
- divCenterNode.style.top=(CY-30)+"px";
- }
- </script>
- </head>
- <body onmousemove="clockMove(event)">
- <!--
- 一、把12个数字按一圈显示出来
- 1\创建12个DIV,分别赋值 1--12
- 2\给12个DIV定位,围成一圈。
- -->
- </body >
- </html>
本来是想做一个会转动,会跑的时钟显示。所以代码中的命名和时钟有关,就不纠结了,亲。初学 javascript,感觉 javascript 很强大。
来源: http://www.phperz.com/article/17/0416/276026.html