一个JavaScript的求爱小特效


Posted in Javascript onMay 09, 2014

这里面做了一个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很强大。
Javascript 相关文章推荐
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
13个PHP函数超实用
Oct 21 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
js中的setInterval和setTimeout使用实例
May 09 #Javascript
js获取 type=radio 值的方法
May 09 #Javascript
js实现的点击数量加一可操作数据库
May 09 #Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 #Javascript
js四舍五入数学函数round使用实例
May 09 #Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 #Javascript
关于Javascript 对象(object)的prototype
May 09 #Javascript
You might like
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
javascript是怎么继承的介绍
2012/01/05 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
python实现简单温度转换的方法
2015/03/13 Python
python中Flask框架简单入门实例
2015/03/21 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
Python接口自动化测试的实现
2020/08/28 Python
Python的信号库Blinker用法详解
2020/12/31 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
python openpyxl模块的使用详解
2021/02/25 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
会议活动邀请函
2014/01/27 职场文书
学校校庆演讲稿
2014/05/22 职场文书