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实现小星星特效

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
json 定义
Jun 10 Javascript
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
UI Events 用户界面事件
Jun 27 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
js中作用域的实例解析
Mar 16 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
微信小程序纯文本实现@功能
Apr 08 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 Undefined index和Undefined variable的解决方法
2008/03/27 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
javascript some()函数用法详解
2014/11/13 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
浅析Python中的序列化存储的方法
2015/04/28 Python
python关键字and和or用法实例
2015/05/28 Python
python实现的文件同步服务器实例
2015/06/02 Python
Python多线程下载文件的方法
2015/07/10 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
华润集团网上药店:健一网
2016/09/19 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
医学生自荐信
2013/12/03 职场文书
日语专业个人的求职信
2013/12/03 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
任命书怎么写
2014/06/04 职场文书
岗位安全生产责任书
2014/07/28 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP