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工具函数代码
Feb 17 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
用原生js做单页应用
Jan 17 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
Paypal支付不完全指北
Jun 04 Javascript
JS如何在不同平台实现多语言方式
Jul 16 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
JS查看对象功能代码
2008/04/25 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
Django nginx配置实现过程详解
2020/09/10 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
JDK安装目录下有哪些内容
2014/08/25 面试题
小学美术教学反思
2014/02/01 职场文书
村道德模范事迹材料
2014/08/28 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
2015年采购员工作总结
2015/04/27 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书