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 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
JavaScript函数模式详解
Nov 07 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
浅析vue深复制
Jan 29 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
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二分法在IP地址查询中的应用
2008/08/12 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
js实现筛选功能
2020/11/24 Javascript
Python如何获取系统iops示例代码
2016/09/06 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
python读写csv文件实例代码
2019/07/05 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
用python批量下载apk
2020/12/29 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
大码女装:Ulla Popken
2019/08/06 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
机关保密承诺书
2014/06/03 职场文书
食品安全宣传标语
2014/06/07 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
2014年副班长工作总结
2014/12/10 职场文书
护理专业自我评价
2015/03/11 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
签字仪式主持词
2015/07/03 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书