一个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增删元素的代码
Feb 14 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
微信小程序开发探究
Dec 27 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 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开发GUI
2006/10/09 PHP
简单的用PHP编写的导航条程序
2006/10/09 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
php类常量用法实例分析
2015/07/09 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
jquery选择器使用详解
2014/04/08 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
Python实现某论坛自动签到功能
2019/08/20 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
中学家长会邀请函
2014/02/03 职场文书
党课心得体会范文
2014/09/09 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
接收函格式
2015/01/30 职场文书
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL
Java中API的使用方法详情
2022/04/06 Java/Android