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实现的分页函数
Dec 22 Javascript
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
js几个验证函数代码
2010/03/25 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
wxPython使用系统剪切板的方法
2015/06/16 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Python全排列操作实例分析
2018/07/24 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
如何定义TensorFlow输入节点
2020/01/23 Python
Python reduce函数作用及实例解析
2020/05/08 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
Weblogic的布署方式
2013/08/23 面试题
事业单位绩效考核实施方案
2014/03/27 职场文书
项目建议书模板
2014/05/12 职场文书
校运动会广播稿300字
2014/10/07 职场文书
优秀校长事迹材料
2014/12/24 职场文书
php png失真的原因及解决办法
2021/11/17 PHP
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server