这里面做了一个JavaScript的求爱小特效,效果如下:

不仅能出现下面的图的效果,还可以让这个图形跟随着鼠标转动哦,这里面只是一个简单的没有修饰的小例子,基于这个例子可以让求爱,更加好玩了。闷骚男们,是不是可以给你的小萝莉发个这样的网页啊。给力的。

贴上code吧:

Insert title here

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;

}

//为什么要用onload,因为我在javascript代码中初始化时钟的div时,调试页面发现没有实现

//后来发现原因,html的代码是从前往后解析的。当先解析到JavaScript代码的时候,向body中

//添加子节点的时候,找不到还未解析的body。所以应该先解析body的啦。方法有两种,一种就是下

//的写法,另一种也可以是在body标签中添加onload方法。

window.οnlοad=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";

}

本来是想做一个会转动,会跑的时钟显示。所以代码中的命名和时钟有关,就不纠结了,亲。初学javascript,感觉javascript很强大。

html5 求爱,一个JavaScript的求爱小特效相关推荐

  1. 手把手带你写一个JavaScript类型判断小工具

    业务写了很多,依然不是前端大神,我相信这是很多'入坑'前端开发同学的迷茫之处,个人觉得前端职业发展是有路径可寻的,前期写业务是一个积累过程,后期提炼总结,比如编程思想,父子类的原型继承,还是对象之间的 ...

  2. HTML5移动的代码,HTML5实现一个能够移动的小坦克示例代码

    复制代码代码如下: 您的浏览器不支持canvas标签 var canvas1=document.getelementbyid('tankmap'); var ctx=canvas1.getcontex ...

  3. html5 实现人物移动,HTML5实现一个能够移动的小坦克

    您的浏览器不支持canvas标签 var canvas1=document.getElementById('tankMap'); var ctx=canvas1.getContext('2d'); v ...

  4. HTML5移动的代码,HTML_HTML5实现一个能够移动的小坦克示例代码,复制代码代码如下: !DOCTYPE h - phpStudy...

    HTML5实现一个能够移动的小坦克示例代码 复制代码代码如下: 您的浏览器不支持canvas标签 var canvas1=document.getElementById('tankMap'); var ...

  5. 如何用html制作一个动态烟花,利用HTML5实现庆祝2018年烟花动画特效

    特效描述:利用HTML5实现庆祝2018年烟花动画特效.利用HTML5实现庆祝2018年烟花动画特效 代码结构 1. HTML代码 2018 var ctx = document.querySelec ...

  6. 8个超棒的使用javascript开发的视觉特效网站

    日期:2012-8-17  来源:GBin1.com 随着flash的落寞及其HTML5和CSS3的发展,更多的网站开始使用javascript,CSS3和HTML5来开发炫酷的特效.今天我们挑选了8 ...

  7. html怎么把字做成动画效果,如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码)...

    摘要 腾兴网为您分享:如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码),学宝,小米社区,手机管家,神州专车等软件知识,以及小学英语点读机,便利宝,startos,工资宝,玩,大将军手 ...

  8. 代码表白小特效 一个比一个浪漫 !!!快收藏!!

    十款表白小特效 用代码表白 一个比一个浪漫 赶紧收藏起来吧!!! 文章简介 最近看了一街坊视频,问路人"你眼中的程序员是怎样的?" 然后一堆关键词就出来了"直男.宅.不懂 ...

  9. ae制h5文字动画_如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)

    我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...

最新文章

  1. 电子学会青少年编程等级考试Python一级题目解析12
  2. 在线试玩,在体感游戏中打败泰森,这位小哥破解了任天堂「拳无虚发」
  3. mysql 常见存储过程,MYSQL存储过程
  4. 家乐福首家付费会员店遇到「喜与忧」背后,行业同质化问题浮出水面
  5. Excel酷炫技能,批量修改工作表名称,让你的工作事半功倍
  6. python 消息中间件_消息队列中间件 RabbitMQ 详细介绍——安装与基本应用(Python)...
  7. easyx写登入界面_小白入门——easyx界面版“贪吃蛇”的C语言实现(详细)
  8. (转)基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用...
  9. Linux常用命令汇总--cat
  10. java 对象流 乱码,JAVA 中的 IO 流
  11. matlab 数组写入文件名,Matlab将数组写入.txt文件
  12. vba 添加outlook 签名_在Excel 2013中使用vba插入电子邮件签名
  13. 静态分析Android程序
  14. android手机视频编辑,美册视频编辑剪辑制作
  15. 处理器核(core)、处理器(cpu)区别
  16. 获取单选框复选框被选中的值
  17. 夜天之书 #59 饱和沟通:开源社群的消息传递准则
  18. 第五章 网络 之 计算机网络
  19. JAVA工具【八】RmbUtils 人民币大小写转换工具
  20. Steam CMD是什么?Steam CMD怎么用?

热门文章

  1. Mysql服务器安装配置和可视化链接等信息整理总和
  2. 后台运行VirtualBox虚拟机
  3. 【学习笔记】ICLR2022-GNNRefine
  4. 【小河今学 | JavaScript】小球弹跳
  5. 对号入座,你是一个合格的程序员吗?
  6. 咪咕盒子MGV2000KL南传_S905L3B_MT7668-当贝纯净桌面-线刷固件包
  7. 网页交互设计基本概念
  8. Bus System HDU - 1690 Foyd
  9. newcoder-反转链表
  10. 测序比对的方法——bowtie