一个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 浏览器判断实现函数
Aug 20 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
php htmlspecialchars加强版
2010/02/16 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
jquery编写日期选择器
2017/03/16 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
Python PO设计模式的具体使用
2019/08/16 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
汽车装潢店创业计划书范文
2014/02/05 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python