js实现漫天星星效果


Posted in Javascript onJanuary 19, 2017

本文实例为大家分享了漫天小星星效果的实现代码,供大家参考,具体内容如下

效果图:

js实现漫天星星效果

实现代码:

<html onclick="init(event)">
 <head>
 <title> new document </title>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <script type="text/javascript">
  //点出漫天小星星
  //背景色
  //给html添加onclick事件
  //创建图片节点,并追加到body父节点下
  //图片的随机大小
  function init(e){
    //创建图片节点(在内存中,还看不见)
    var imgObj=document.createElement("img");
    //追加节点
    document.body.appendChild(imgObj);
    //添加属性
    imgObj.src="xingxing.gif";
    //添加width属性
    imgObj.width=getRandom(15,85);
    //定位
    var x=e.clientX? e.clientX : event.clientX;
    var y=e.clientY? e.clientY : event.clientY;
    imgObj.style.position="absolute";
    imgObj.style.left=x - imgObj.width/2+"px";
    imgObj.style.top=y- imgObj.width/2+"px";
  }
  function getRandom(min,max){
    return Math.floor(Math.random()*(max-min)+min);
  }
 </script>
 </head>
 <body style="background-color:black" >
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 自定义类型方法小结
Mar 02 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 #Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 #Javascript
javaScript基础详解
Jan 19 #Javascript
bootstrap css样式之表单
Jan 19 #Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 #Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 #Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 #Javascript
You might like
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
python中的内置函数getattr()介绍及示例
2014/07/20 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
热能动力工程毕业生自荐信
2013/11/07 职场文书
国际政治个人自荐信范文
2013/11/26 职场文书
高二美术教学反思
2014/01/14 职场文书
法学函授自我鉴定
2014/02/06 职场文书
项目合作协议书
2014/04/16 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
7个关于Python的经典基础案例
2021/11/07 Python
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL
python实现双向链表原理
2022/05/25 Python
python实现学员管理系统(面向对象版)
2022/06/05 Python