js实现漫天星星效果
更新时间：2017年01月19日 15:09:38 作者：yangzailu
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
大家在日常生活中都有网购的经验，有的网站会有商品放大镜功能，效果非常棒，那么基于js代码是如何实现的呢？下面小编给大家带来了基于js实现购物网站商品放大镜效果，非常不错，感兴趣的朋友参考下吧2016-09-09
本文主要介绍了用move.js库实现百叶窗特效的思路与方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要为大家详细介绍了如何利用JavaScript实现简单的在线网页烟花效果，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-02-02
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
这篇文章主要介绍了autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法，本文通过图文并茂实例代码相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-05
这篇文章主要介绍了JS实现超简单的汉字转拼音功能,结合实例形式分析了javascript汉字转换成拼音的函数定义与使用技巧,需要的朋友可以参考下2016-12-12
这篇文章主要为大家详细介绍了js html制作简单日历的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
基数排序是一种根据数字位数的值,对整数进行排序的算法,本文主要介绍了JS实现基数排序的示例代码,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
ts中数据类型的定义是重点之一,所以必须明确ts有哪些数据类型,下面这篇文章主要给大家介绍了关于Typescript中数据类型的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
今天小编就为大家分享一篇layui+jquery支持IE8的表格分页方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
如果简单的嵌套一般都是外面用双引号，则里面用单引号，反之亦同，如果特别负责的嵌套大家看下如下的方法。2009-05-05
最新评论