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 AutoScroller 函数类
May 29 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
jQuery操作cookie
Aug 08 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 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 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
python中os操作文件及文件路径实例汇总
2015/01/15 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
24式加速你的Python(小结)
2019/06/13 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
详解Python time库的使用
2019/10/10 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
Python reduce函数作用及实例解析
2020/05/08 Python
python tkinter实现连连看游戏
2020/11/16 Python
工商技校毕业生自荐信
2013/11/15 职场文书
乔迁之喜主持词
2014/03/27 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
Python time库的时间时钟处理
2021/05/02 Python
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
Nginx配置https的实现
2021/11/27 Servers
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript