iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >js怎么实现漫天星星效果
  • 438
分享到

js怎么实现漫天星星效果

2024-04-02 19:04:59 438人浏览 泡泡鱼
摘要

这篇文章主要介绍了js怎么实现漫天星星效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。本文实例为大家分享了漫天小星星效果的实现代码,供大家

这篇文章主要介绍了js怎么实现漫天星星效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

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

效果图:

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  >
 </body>
</html>

感谢你能够认真阅读完这篇文章,希望小编分享的“js怎么实现漫天星星效果”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网VUE频道,更多相关知识等着你来学习!

--结束END--

本文标题: js怎么实现漫天星星效果

本文链接: https://www.lsjlt.com/news/65914.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • js怎么实现漫天星星效果
    这篇文章主要介绍了js怎么实现漫天星星效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。本文实例为大家分享了漫天小星星效果的实现代码,供大家...
    99+
    2024-04-02
  • JS实现五星好评效果
    用JS实现面向对象方法实现京东的五星好评效果。 鼠标滑过时的显示: 当评价完成后,关闭浏览器重新打开页面,还是上次的评价结果。用cookie实现。 具体实现如下: impor...
    99+
    2024-04-02
  • 怎么用JS实现消灭星星
    这篇文章主要介绍“怎么用JS实现消灭星星”,在日常操作中,相信很多人在怎么用JS实现消灭星星问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用JS实现消灭星星”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
    99+
    2023-06-25
  • Vue怎么实现星空效果
    本篇内容主要讲解“Vue怎么实现星空效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue怎么实现星空效果”吧!星空效果如下1.星空背景子组件<template> &nb...
    99+
    2023-06-29
  • Vue实现星空效果
    本文实例为大家分享了Vue实现星空效果的具体代码,供大家参考,具体内容如下 需要实现上图的星空效果 1.星空背景子组件 <template>   <div cla...
    99+
    2024-04-02
  • CSS3怎么实现流星雨效果
    小编给大家分享一下CSS3怎么实现流星雨效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!说明:正文只讲述单个流星雨的实现方式,多个的效果只需要对单个的动画起始点...
    99+
    2023-06-14
  • 怎么在css中实现一个评分星星效果
    本篇文章为大家展示了怎么在css中实现一个评分星星效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。结构如下:很简单的结构,主要核心代码如下:<div class="gra...
    99+
    2023-06-08
  • CSS 、JS如何实现浪漫流星雨动画
    这篇文章给大家分享的是有关CSS 、JS如何实现浪漫流星雨动画的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1,效果图2,源码HTML< body >  &nb...
    99+
    2023-06-08
  • JS实现消灭星星案例
    本文实例为大家分享了JS实现消灭星星的具体代码,供大家参考,具体内容如下 消灭星星的效果图: 功能需求: 1、点击星星,星星消失 2、每隔一秒自动生成一颗星星 3、星星的大小、出现...
    99+
    2024-04-02
  • 怎么用Python实现流星雨效果
    这篇文章将为大家详细讲解有关怎么用Python实现流星雨效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。流星雨的前提是得先有一个流星,所谓流星,就是一个拖着尾巴的直线。所谓拖着尾巴,实际上是我们的浪漫想...
    99+
    2023-06-22
  • css3+js如何实现3D行星运转效果
    这篇文章给大家分享的是有关css3+js如何实现3D行星运转效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。HTML部分<div class="pat...
    99+
    2024-04-02
  • JS实现消灭星星小游戏
    本文实例为大家分享了JS实现消灭星星小游戏的具体代码,供大家参考,具体内容如下 先看看效果图: 先准备css和一张星星图片,很简单,body背景设为黑色。 <style>...
    99+
    2024-04-02
  • 如何使用CSS 、JS实现浪漫流星雨动画
    小编给大家分享一下如何使用CSS 、JS实现浪漫流星雨动画,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   HTML   ...
    99+
    2024-04-02
  • js怎么实现花瓣漫天飞舞特效
    这篇文章主要讲解了“js怎么实现花瓣漫天飞舞特效”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“js怎么实现花瓣漫天飞舞特效”吧!效果:代码:<!DOCTYPE HTML&nb...
    99+
    2023-07-04
  • 怎么用html实现流星雨的效果
    小编给大家分享一下怎么用html实现流星雨的效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   <!doctypeh...
    99+
    2024-04-02
  • 怎么用Javascript制作随机星星效果图
    这篇文章主要讲解了“怎么用Javascript制作随机星星效果图”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用Javascript制作随机星星效果图”...
    99+
    2024-04-02
  • Vue实现星级评价效果
    本文实例为大家分享了Vue实现星级评价效果的具体代码,供大家参考,具体内容如下 1、本文五角星采用的阿里巴巴矢量图标库;2、数据内容可根据实际需求进行改动;3、主要实现了鼠标滑动改变...
    99+
    2024-04-02
  • html+css+js怎么实现星空旋转和文字淡入效果
    这篇文章主要讲解了“html+css+js怎么实现星空旋转和文字淡入效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html+css+js怎么实现星空旋转...
    99+
    2024-04-02
  • HTML5怎么实现炫丽的流星雨效果
    这篇“HTML5怎么实现炫丽的流星雨效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“HT...
    99+
    2024-04-02
  • JavaScript如何实现流星雨效果
    这篇文章主要介绍“JavaScript如何实现流星雨效果”,在日常操作中,相信很多人在JavaScript如何实现流星雨效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript如何实现流星雨效果...
    99+
    2023-07-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作