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的AJAX用法
May 10 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
原生JS实现pc端轮播图效果
Dec 21 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
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
PHP 配置后台登录以及模板引入
2017/01/24 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python正则表达式爬取猫眼电影top100
2018/02/24 Python
python使用minimax算法实现五子棋
2019/07/29 Python
浅析matlab中imadjust函数
2020/02/27 Python
基于python实现地址和经纬度转换
2020/05/19 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
python selenium 获取接口数据的实现
2020/12/07 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
医学生职业规划范文
2014/01/05 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书