一个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 相关文章推荐
javascript入门·对象属性方法大总结
Oct 01 Javascript
javascript Prototype 对象扩展
May 15 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
代码解析React中setState同步和异步问题
Jun 03 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数组(array)输出的三种形式详解
2013/06/05 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php fread读取文件注意事项
2016/09/24 PHP
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
python实现哈希表
2014/02/07 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
致青春观后感
2015/06/09 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS