一个JavaScript的求爱小特效
更新时间：2014年05月09日 10:26:25 作者：
本文做了一个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很强大。
不仅能出现下面的图的效果，还可以让这个图形跟随着鼠标转动哦，这里面只是一个简单的没有修饰的小例子，基于这个例子可以让求爱，更加好玩了。闷骚男们，是不是可以给你的小萝莉发个这样的网页啊。给力的。
贴上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很强大。
相关文章
随着UniApp的流行,越来越多的开发者选择使用它来构建跨平台应用程序,下面这篇文章主要给大家介绍了关于uniapp实现全局设置字体大小(小中大的字体切换)的相关资料,需要的朋友可以参考下2023-06-06
这篇文章主要给大家介绍了关于three.js引入glsl文件并高亮显示代码的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了微信小程序滑动选择器的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要给大家详细介绍了javascript中if和switch，==和===的区别和联系，十分的细致实用，有需要的小伙伴可以参考下。2015-07-07
奇妙的js...2007-09-09
下面小编就为大家带来一篇原生js实现简单的模态框示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了JavaScript数据结构之二叉树的查找算法,结合具体实例形式分析了javascript针对二叉树节点最小值、最大值的相关查找操作实现技巧,需要的朋友可以参考下2017-04-04
这篇文章将带大家深入探讨 class 在 JavaScript 中的作用、语法和使用方法，并与 ES5 构造函数进行对比，希望可以帮助大家更好地理解和应用类的概念2023-06-06
这篇文章主要为大家详细介绍了微信小程序教程系列之视图层的条件渲染，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
对数组中的项目进行分组,你可能已经做过很多次了,好消息是,JavaScript 现在有了分组方法,所以你再也不必这样做了,下面我们就来看看它们的具体使用吧2024-02-02
最新评论