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
jquery 简单的进度条实现代码
Mar 11 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
初步了解javascript面向对象
Nov 09 Javascript
JS原型链怎么理解
Jun 27 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
Vue中fragment.js使用方法小结
Feb 17 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 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
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
解析PHP的session过期设置
2013/06/29 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
input 高级限制级用法
2009/03/26 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
Python 基础教程之str和repr的详解
2017/08/20 Python
使用Python设计一个代码统计工具
2018/04/04 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
利用python计算时间差(返回天数)
2019/09/07 Python
wxPython实现绘图小例子
2019/11/19 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
Python实现画图软件功能方法详解
2020/07/28 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
网上卖盒饭创业计划书范文
2014/02/07 职场文书
学生安全教育材料
2014/02/14 职场文书
超市创业计划书
2014/04/24 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
教师求职信怎么写
2015/03/20 职场文书
倡议书格式及范文
2015/04/29 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
员工给公司的建议书
2019/06/24 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
python 批量压缩图片的脚本
2021/06/02 Python
Python学习之迭代器详解
2022/04/01 Python
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS