编程 Javascript

JS实现小星星特效

Posted in Javascript onDecember 24, 2019

本文实例为大家分享了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实现小星星特效

- Author -

顾一大人

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

自适应图片大小的弹出窗口

Jul 27 Javascript

JavaScript prototype属性深入介绍

Nov 27 Javascript

jquery遍历select元素(实例讲解)

Dec 31 Javascript

使用CSS3的scale实现网页整体缩放

Mar 18 Javascript

JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例

Mar 04 Javascript

jQuery拖拽插件gridster使用指南

Apr 21 Javascript

jQuery多个版本和其他js库冲突的解决方法

Aug 11 Javascript

JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别

Aug 26 Javascript

javascript 实现文本使用省略号替代（超出固定高度的情况）

Feb 21 Javascript

基于Vue框架vux组件库实现上拉刷新功能

Nov 28 Javascript

在AngularJs中设置请求头信息(headers)的方法及不同方法的比较

Sep 04 Javascript

vue prop传值类型检验方式

Jul 30 Javascript

JS实现星星海特效

Dec 24 #Javascript

JS实现图片切换特效

Dec 23 #Javascript

JS实现简易留言板特效

Dec 23 #Javascript

JS实现关闭小广告特效

Jan 29 #Javascript

vue element-ui实现动态面包屑导航

Dec 23 #Javascript

vue实现图片上传预览功能

Dec 23 #Javascript

vue项目实现图片上传功能

Dec 23 #Javascript

You might like

php实现jQuery扩展函数

2009/10/30 PHP

PHP中Header使用的HTTP协议及常用方法小结

2014/11/04 PHP

php版微信数据统计接口用法示例

2016/10/12 PHP

PHP数据库操作三：redis用法分析

2017/08/16 PHP

php获取微信openid方法总结

2019/10/10 PHP

Extjs列表详细信息窗口新建后自动加载解决方法

2010/04/02 Javascript

jquery 的 $("#id").html() 无内容的解决方法

2010/06/07 Javascript

Javascript window对象详解

2014/11/12 Javascript

JavaScript 实现打印,打印预览,打印设置

2014/12/30 Javascript

jQuery中extend函数的实现原理详解

2015/02/03 Javascript

js实现图片点击左右轮播

2015/07/08 Javascript

跟我学习javascript的call(),apply(),bind()与回调

2015/11/16 Javascript

JavaScript判断表单为空及获取焦点的方法

2016/02/12 Javascript

Bootstrap轮播图学习使用

2017/02/10 Javascript

Web开发中客户端的跳转与服务器端的跳转的区别

2017/03/05 Javascript

jQuery滚动监听实现商城楼梯式导航效果

2017/03/06 Javascript

JS交互点击WKWebView中的图片实现预览效果

2018/01/05 Javascript

JavaScript中EventLoop介绍

2018/01/22 Javascript

JS通过ajax + 多列布局 + 自动加载实现瀑布流效果

2019/05/30 Javascript

JS面向对象之多选框实现

2020/01/17 Javascript

[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10

2018/07/05 DOTA

python进阶教程之模块（module）介绍

2014/08/30 Python

python从入门到精通（DAY 3）

2015/12/20 Python

Linux中安装Python的交互式解释器IPython的教程

2016/06/13 Python

python日志记录模块实例及改进

2017/02/12 Python

Python shelve模块实现解析

2019/08/28 Python

详解使用Python写一个向数据库填充数据的小工具(推荐)

2020/09/11 Python

CSS3效果：自定义“W”形运行轨迹实例

2017/03/29 HTML / CSS

Myholidays美国：在线旅游网站

2019/08/16 全球购物

幼师自荐信

2013/10/26 职场文书

教师党员思想汇报

2014/01/06 职场文书

对祖国的寄语大全

2014/04/11 职场文书

党支部创先争优承诺书

2014/08/30 职场文书

神龙架导游词

2015/02/11 职场文书

导游词之日月潭

2019/11/05 职场文书

flex弹性布局详解

2022/03/20 HTML / CSS