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中的end()使用方法
Jul 10 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 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
smarty section简介与用法分析
2008/10/03 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
Angular工具方法学习
2016/12/26 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
flask应用部署到服务器的方法
2019/07/12 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
Spy++的使用方法及下载教程
2021/01/29 Python
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
大学生个人自我鉴定
2013/12/03 职场文书
毕业生护理专业个人求职信范文
2014/01/04 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
运动会通讯稿150字
2014/02/15 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang