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 相关文章推荐
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
js实现简单音乐播放器
Jun 30 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简单系统查询模块代码打包下载
2008/06/07 PHP
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
js右键菜单效果代码
2007/07/21 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
vue slot与传参实例代码讲解
2019/04/28 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
Android笔试题总结
2014/11/29 面试题
工程专业毕业生自荐信范文
2013/12/25 职场文书
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
小学副班长竞选稿
2015/11/21 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
Python中的min及返回最小值索引的操作
2021/05/10 Python
python中__slots__节约内存的具体做法
2021/07/04 Python