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扩展自写的 UI导航
Jan 13 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
微信jssdk用法汇总
Jul 16 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 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分页类的代码
2011/05/18 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
Python实现新浪博客备份的方法
2016/04/27 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
详解Python3定时器任务代码
2019/09/23 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
基于Python测试程序是否有错误
2020/05/16 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
2014全国两会大学生学习心得体会
2014/03/10 职场文书
安全生产月活动总结
2014/05/04 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
春节慰问信范文
2015/02/15 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
农村党支部承诺书
2015/04/30 职场文书
对学校的意见和建议
2015/06/04 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers