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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
vue 实现购物车总价计算
Nov 06 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 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中get_defined_constants函数用法实例分析
2015/05/12 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
vue实现登录功能
2020/12/31 Vue.js
Python版的文曲星猜数字游戏代码
2013/09/02 Python
Python实现的Kmeans++算法实例
2014/04/26 Python
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
python字符串循环左移
2019/03/08 Python
python中JWT用户认证的实现
2020/05/18 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
期末总结的个人自我评价
2013/11/02 职场文书
母婴店促销方案
2014/03/05 职场文书
我的画教学反思
2014/04/28 职场文书
励志演讲稿大全
2014/08/21 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书