html中鼠标点击图片变动,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;
}
这个案例,也可以做成 图片跟随鼠标移动 上图 !
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
时间: 2020-08-18
html中鼠标点击图片变动,JS实现页面鼠标点击出现图片特效相关推荐
- express应用中ajax结合模板引擎ejs.js渲染页面
一.express应用中ajax结合模板引擎ejs.js渲染页面 在views新建一个渲染模板命名 Template.ejs Template.ejs 示例: <% if(coursesList ...
- js 获取页面鼠标选中的文字
js获取页面鼠标选中的文字,最主要的代码 event.selection = window.getSelection(); 页面代码 <div><p class="cont ...
- JS获取页面鼠标点击位置的坐标
本来想通过JS实现当前页面对其他页面的操作,在网上发现了这段js代码,先保存下来,可以获取页面鼠标点击位置的坐标. <html> <body> <script> f ...
- 手机php网站不显示图片,javascript,_手机页面用innerHTML拼接的图片不显示,javascript - phpStudy...
手机页面用innerHTML拼接的图片不显示 测试代码 input,button{ height:35px; } add function addEmotion(t){ alert(t); } var ...
- java爬取验证码图片_JAVA HttpClient实现页面信息抓取(获取图片验证码并传入cookie实现信息获取)...
JAVA HttpClient实现页面信息抓取(获取图片验证码并传入cookie实现信息获取) 发布时间:2018-05-18 16:41, 浏览次数:632 , 标签: JAVA HttpClien ...
- html鼠标触发显示悬浮窗,JS事件之鼠标悬浮窗(鼠标悬浮窗抖动问题的解决)
鼠标进入显示悬浮窗,思路有简单有困难. 首先要注意的是我们要给悬浮窗设置position为absolute,不然我们改了 style.left style.top发现没有变化很尴尬.其余的内容看起来就 ...
- js获得页面鼠标位置
1.客户区坐标位置:clientX,clientY 鼠标相对于在当前页面可视范围左上角的位置 2.页面坐标位置:pageX,pageY 鼠标相对于页面左上角的位置(受滑动等影响,例如pageY=cli ...
- 在html中如何设置静音,如何用JS静音页面中的所有声音?
小编典典 规则1:切勿在页面加载后启用音频自动播放. 无论如何,我将使用jQuery显示HTML5: // WARNING: Untested code ;) window.my_mute = fal ...
- iframe子页面点击按钮,执行父页面的点击事件
iframe 子页面点击.parent 父页面 的id(auth-link-btn)的事件 <a href="javascript:void(0);" οnclick=&q ...
- 功能强大漂亮的js图片相册,js点击小图显示大图
原生js点击图片触发弹窗 页面显示模糊的小图片(small_X.jpg),点击全屏显示高清大图片(large_X.jpg) 可实现放大.缩小.拖拽.旋转.上一张.下一张 以下为demo相关页面展示: ...
最新文章
- Java Enumeration接口
- 2021华为软件精英挑战赛(附赠线下判题器链接)——经历
- 王劲首度解析景驰:我们是跑得最快的无人驾驶公司
- 数据挖掘-数据清理过程
- linux命令:sed工具替换文件内容
- python面试刷题app_Python面试的一些心得,与Python练习题分享
- 单片机检测电机频率c语言,基于51单片机的电动机测速表的设计.doc
- SCCM 2012 R2 从入门到精通 Part8 软件部署
- Helm 3 完整教程(七):Helm 函数讲解(1)逻辑和流控制函数
- python各个关键词的意思_想学好Python,你必须了解Python中的35个关键词
- ActionBarSherlock学习笔记 第一篇——部署
- 7-2 求交错序列前N项和 (10 分)
- 计算机自定义桌面,如何自定义电脑桌面的图标显示
- 项目4-分数类和整型数的四则运算
- 对mysql优缺点的思考
- c#使用pop3服务器进行邮箱验证
- 计算机专业2017大学排名,全国计算机专业大学排名2017计算机专业大学排名
- WSO2 Business Process Server(WSO2 BPS)使用简易教程
- 字符迷阵[网易题目]
- 往事如烟 - 高手老胡