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 相关文章推荐
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
vue el-table实现自定义表头
Dec 11 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
JavaScript函数柯里化
Nov 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生成EXCEL的东东
2006/10/09 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
Python编写一个闹钟功能
2017/07/11 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
python 爬取小说并下载的示例
2020/12/07 Python
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
实习教师自我鉴定
2013/12/12 职场文书
生产助理岗位职责
2014/06/18 职场文书
安全目标责任书
2014/07/22 职场文书
世界气象日活动总结
2015/02/27 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS