脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS小星星特效

JS实现小星星特效

 更新时间：2019年12月24日 08:52:17   作者：顾一大人  
这篇文章主要为大家详细介绍了JS实现小星星特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

鼠标点击窗口实现如图效果：
看起来是不是很像小星星呀

代码如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
 <body style="background-color: #000000;">
 <!-- 
 1、鼠标点击 window
 2、获取鼠标位置
 3、创建img
 4、设置 src
 5、设置图片位置（图片定位，设置样式）
 6、图片随机大小
 7、插入body
 -->
 <script type="text/javascript">
 // 鼠标点击window
 window.onclick=function(e){
 // 创建img
 let img=document.createElement("img");
 // 设置src
 img.setAttribute("src","timg.gif");
 // 设置图片大小随机
 let w=Math.random()*50+50;
 img.setAttribute("height",w);
 // 图片位置,绝对定位
 img.style.position="absolute";
 
 img.style.left=(e.clientX-w/2)+"px";
 img.style.top=(e.clientY-w/2)+"px";
 
 // 将图片插入body
 document.body.appendChild(img);
 
 }
 
 </script>
 </body>
</html>

素材

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS数组及对象遍历方法代码汇总

    JS数组及对象遍历方法代码汇总

    这篇文章主要介绍了JS数组及对象遍历方法代码汇总,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • js如何根据id删除数组中对象

    js如何根据id删除数组中对象

    这篇文章主要介绍了js如何根据id删除数组中对象的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • JavaScript的Number对象的toString()方法

    JavaScript的Number对象的toString()方法

    toString()方法可以把Number对象转换成字符串，并返回此字符串，本文给大家介绍JavaScript的Number对象的toString()方法，对javascript对象方法相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • javascript将DOM节点添加到文档的方法实例分析

    javascript将DOM节点添加到文档的方法实例分析

    这篇文章主要介绍了javascript将DOM节点添加到文档的方法,对比分析了javascript的两种节点创建的方法,涉及javascript节点操作及运行时间计算的相关技巧,需要的朋友可以参考下
    2015-08-08
  • js使用cookie记录用户名的方法

    js使用cookie记录用户名的方法

    这篇文章主要介绍了js使用cookie记录用户名的方法,通过完整实例形式分析了JavaScript针对cookie的创建、赋值及删除等操作技巧,以及通过cookie记录用户登录信息的方法,需要的朋友可以参考下
    2015-11-11
  • JS中使用正则表达式g模式和非g模式的区别

    JS中使用正则表达式g模式和非g模式的区别

    这篇文章给大家详细介绍了JS中使用正则表达式g模式和非g模式的区别，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2017-04-04
  • Bpmn.js activiti 流程编辑器详细教程

    Bpmn.js activiti 流程编辑器详细教程

    流程编辑器是一种用于创建、编辑和管理流程图的工具,它提供了一个可视化的界面,使用户能够以图形化的方式定义和配置流程的各个步骤、条件和流程间的关系,说明关于bpmn.js的一些事件, 通过本文你可以了解到,感兴趣的朋友一起看看吧
    2023-10-10
  • js中数组排序sort方法的原理分析

    js中数组排序sort方法的原理分析

    这篇文章主要介绍了js中数组排序sort方法的原理,以实例形式分析了sort排序方法的运行机制,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-11-11
  • JavaScript 中的数据类型Number

    JavaScript 中的数据类型Number

    这篇文章主要介绍了JavaScript 中的数据类型Number，Number 类型使用 IEEE 754 格式表示整数和浮点值，下文相关详细资料介绍，需要的小伙伴可以参考一下
    2022-04-04
  • 实例学习JavaScript读取和写入cookie

    实例学习JavaScript读取和写入cookie

    本篇内容主要给大家通过实例讲述了JavaScript读取和写入cookie的相关知识点，有这方面需要的朋友参考下吧。
    2018-01-01

最新评论