一个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 EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
实例讲解vue源码架构
Jan 24 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
js实现限定范围拖拽的示例
Oct 26 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
mysql 性能的检查和优化方法
2009/06/21 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
关于vue-router的那些事儿
2018/05/23 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
python在命令行下使用google翻译(带语音)
2014/01/16 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
Python实现简单的四则运算计算器
2016/11/02 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
公司口号大全
2014/06/11 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
党支部综合考察意见
2015/06/01 职场文书
部分武汉产收音机展览
2022/04/07 无线电