JS实现页面鼠标点击出现图片特效


Posted in Javascript onAugust 19, 2020

本文实例为大家分享了js实现页面鼠标点击出现图片,供大家参考,具体内容如下

需求:

在页面可视区鼠标点击时,鼠标位置出现图片

技术:

监听器,鼠标坐标获取

效果图

JS实现页面鼠标点击出现图片特效

源码分享:

图片是动态添加进页面的,所以没有HTML部分。

JS

let div = document.createElement("div");
 div.id = "mouseImg";
 for (let i =0 ; i <3 ;i++){
 let img = document.createElement("img");
 img.src = "images/timg.gif";
 div.appendChild(img);
 }
 document.body.appendChild(div);
 let divImg = document.querySelector("#mouseImg");
 document.addEventListener("mousedown",function (e) {
 let x = e.pageX;
 let y = e.pageY;
 divImg.style.left = x + "px" ;
 divImg.style.top = y + "px";
 let imgs = divImg.children;
 for (let i =0 ; i < imgs.length ;i++) {
 imgs[i].style.opacity = "1";
 setTimeout(function () {
 imgs[i].style.opacity = "0";
 },2200);
 }
 });

CSS

body {
 background-color: rgba(0, 255, 255, 0.12);
 cursor: pointer;
 }
 #mouseImg {
 width: 50px;
 height: 50px;
 position: absolute;
 }
 #mouseImg img {
 width: 100%;
 opacity: 0;
 transition: all .9s ease ;
 }
 #mouseImg img:nth-of-type(2){
 transition-delay: .5s;
 }
 #mouseImg img:nth-of-type(3){
 transition-delay: .8s;
 }

这个案例,也可以做成 图片跟随鼠标移动 上图 !

JS实现页面鼠标点击出现图片特效

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

Javascript 相关文章推荐
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
js中数组的常用方法小结
Dec 30 Javascript
js调用刷新界面的几种方式
May 03 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 #Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 #Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 #Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 #Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 #Javascript
JavaScript中交换值的10种方法总结
Aug 18 #Javascript
js+css3实现炫酷时钟
Aug 18 #Javascript
You might like
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
javascript 写类方式之三
2009/07/05 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
python求素数示例分享
2014/02/16 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
Python微信操控itchat的方法
2019/05/31 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
方正Java笔试题
2014/07/03 面试题
党委书记岗位职责
2013/11/24 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python
python识别围棋定位棋盘位置
2021/07/26 Python
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server