一个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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
javascript prototype 原型链
Mar 12 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
JS如何生成随机验证码
Mar 02 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
PHP循环结构实例讲解
2014/02/10 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
图片完美缩放
2006/09/07 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
详解Vue整合axios的实例代码
2017/06/21 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
vue组件学习教程
2017/09/09 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
Python 中Pickle库的使用详解
2018/02/24 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
python/golang 删除链表中的元素
2020/09/14 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
幼儿园家长会邀请函
2014/01/15 职场文书
公司聘任书模板
2014/03/29 职场文书
力克胡哲观后感
2015/06/10 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang
Java8中Stream的一些神操作
2021/11/02 Java/Android