js实现漫天星星效果

2024-10-22 15:24:57

本文实例为大家分享了漫天小星星效果的实现代码，供大家参考，具体内容如下

效果图：

实现代码：

<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实现随机显示星星特效

本文实例讲解了javascript实现随机显示星星特效的详细代码,具体内容如下 (1)网页背景是黑的 (2)星星随机大小:min=15,max=80 (3)星星的坐标是随机的: x_left=0,x_right=(浏览器宽-星星宽) y_top=0,y_bottom=? (4)单击某个星星,星星消失 (5)网页加载完成,开始显示星星 (6)定时器:每隔一个周期,插入一个星星 <html> <head> <meta h
js实现飞入星星特效代码

本文实例讲述了js实现飞入星星特效代码,分享给大家供大家参考. 具体实现代码如下: 复制代码代码如下: <html> <head> <title>星空极速飞入效果</title> <style type="text/css">  </style> </head> <body> <scr
基于JavaScript实现飘落星星特效

本文实例为大家分享了js飘落星星特效的具体代码,供大家参考,具体内容如下 1.效果图 2.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ position: absolute; } body { background-image: u
js实现漫天星星效果

本文实例为大家分享了漫天小星星效果的实现代码,供大家参考,具体内容如下效果图: 实现代码: <html onclick="init(event)"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script ty
js实现商城星星评分的效果

在这里和朋友们分享一个使用js实现商城星星评分的效果,希望能给大家点帮助,当然更好的特效还有待大家完善. html如下: <div class="starts"> <ul id="pingStar"> <li rel="1" title="特别差,给1分"></li> <li rel="2" title="很差,给2分"><
JS实现点星星消除小游戏

本文实例为大家分享了JS实现点星星消除游戏的具体代码,供大家参考,具体内容如下步骤及游戏功能分析: 1.网页上的随机出现小星星: 2.点击小星星,小星星消失: 绑定一个onclick事件: 对象.事件 = 事件处理函数: 注意:要想删除某个节点,必须找到它的父节点注意:在绑定事件中this可以直接使用 3.添加功能开始游戏 4.添加功能暂停游戏 5.游戏进度条功能 <style type="text/css"> #d2{ width: 100px
js定时器实现倒计时效果

本文实例为大家分享了js定时器实现倒计时效果展示的具体代码,供大家参考,具体内容如下日期函数倒计时 = 用将来的时间 - 现在的时间问题:将来时间距离 1970 毫秒数 - 现在距离 1970年1 用将来的毫秒数 - 现在的毫秒数不断转换就可以了 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <t
原生JS实现的放大镜效果实例代码

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style
JS实现霓虹灯文字效果的方法

本文实例讲述了JS实现霓虹灯文字效果的方法.分享给大家供大家参考.具体如下: 这里使用JS实现网页上的霓虹灯文字特效代码特效,运行效果看一下,你会看到文字的颜色像霓虹灯一样,连续不停变化,五颜六色的,很炫的样子,所以就叫做霓虹文字吧,也可以叫他文字变色效果. 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html
用js实现放大镜的效果的简单实例

第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂....).我相信以后自己也能够写出高大上的东西.加油! 废话说的有点多,说正事.前几天看了一段潭州教育的教学视频,其中的老师是用JQuery实现放大镜的效果(老师讲的是在是太慢,各种乱扯,跳着看的).由于我还没有好好的学习过JQuery
基于JS实现翻书效果的页面切换样式

本文给大家分享一段代码,基于js代码实现的翻书效果的页面切换样式,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <
js游戏人物上下左右跑步效果代码分享

本文实例讲述了js游戏人物上下左右跑步效果.分享给大家供大家参考.具体如下: js游戏人物上下左右跑步效果是一款jquery ui制作的点击按钮网格布局头像图片动画切换特效.你操控着游戏人物,掌控一切是不是很有意思,感兴趣的小伙伴们可以学习一下运行效果图:-------------------查看效果下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery实现热气球动画背景登录框代码如下 <!DOCTYPE html>

js实现漫天星星效果

相关推荐

随机推荐