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简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
基于Vue实现timepicker
Apr 25 Javascript
理解javascript async的用法
Aug 22 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
页面点击小红心js实现代码
May 26 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
深入理解vue中的slot与slot-scope
Apr 22 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函数,php爱好者站推荐
2007/03/19 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
浅析php工厂模式
2014/11/25 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
详解Python绘图Turtle库
2019/10/12 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
什么是python的函数体
2020/06/19 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
商场促销活动方案
2014/02/08 职场文书
道歉信怎么写
2015/05/12 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python