一个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 相关文章推荐
JS焦点图切换,上下翻转
May 12 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
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生成不重复随机数的方法汇总
2014/11/19 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
XENON基于JSON变种
2010/07/27 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python Cookie 读取和保存方法
2018/12/28 Python
详解python读取和输出到txt
2019/03/29 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
巴西网上药房:onofre
2016/11/21 全球购物
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
党员思想汇报范文
2013/12/30 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
考试后的感想
2015/08/07 职场文书
Nginx进程调度问题详解
2021/09/25 Servers