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;
 }

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript实现鼠标点击生成文字特效

    javascript实现鼠标点击生成文字特效

    前端实用脚本(鼠标点击生成文字特效) 你好! 这是你第一次写 博客 目的是为了记录常用到的技术知识以供同行参考学习和方便自己以后查阅 前言 最近在浏览一些博客的时候总是能够看到,当我点击鼠标的时候鼠标位置就会出现文字然后往上方浮动.当时比较好奇,然后空闲时间就去百度了一下这种效果是怎么实现的,然后结合一些博客整理了一下. 旧版本 1.单一的浮动效果 ,旧版本的只有一种颜色,比较单调: 2.没有遵循 : 可以run的demo才是好demo的原则 新版本 1.筛选了多种好看的颜色样式 2.复制代码到

  • js 鼠标点击事件及其它捕获

    <div><a href="#" onclick="showPricediv('aaa')" abc=1>adsfsdf</a></div> <div id="aaa" style="display:none" onmouseover="temshowTag=true" onmouseout="temshowTag=false">

  • js实现鼠标点击飘爱心效果

    本文实例为大家分享了js实现鼠标点击飘爱心的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g

  • Js鼠标跟随代码小手点击实例方法

    Js鼠标跟随代码小手点击实例方法

    可爱的鼠标跟随 html{ background:#000;} body,html,input{ cursor:none;} body,html{ height:100%;} #cursor{ position:absolute; left:100px; top:100px; display:block;} window.onload = function(){ var oCursor = document.getElementById("cursor"); document.onmo

  • javascript触发模拟鼠标点击事件

    事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法. 一般我们在元素上绑定事件后,是靠用户在这些元素上的鼠标行为来捕获或者触发事件的,或者自带的浏览器行为事件,比如click,mouseover,load等等,有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件.这个时候我们可以使用IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法.

  • Javascript实现鼠标点击冒泡特效

    Javascript实现鼠标点击冒泡特效

    本文实例为大家分享了js鼠标点击冒泡的具体代码,供大家参考,具体内容如下 一个用JS写的鼠标左击特效 点击鼠标左键会出现红心"❤"或者字符表情"(๑•́ ₃ •̀๑)"- 常用Emoji 可以自行替换,如需复制,请从底部链接移步至Github 代码 onload = function() { var click_cnt = 0; var $html = document.getElementsByTagName("html")[0]; var $

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

    本文实例为大家分享了js实现页面鼠标点击出现图片,供大家参考,具体内容如下 需求: 在页面可视区鼠标点击时,鼠标位置出现图片 技术: 监听器,鼠标坐标获取 效果图 源码分享: 图片是动态添加进页面的,所以没有HTML部分. JS let div = document.createElement("div"); div.id = "mouseImg"; for (let i =0 ; i <3 ;i++){ let img = document.createEl

  • js监听鼠标点击和键盘点击事件并自动跳转页面

    js监听鼠标点击(onmousedown)和键盘点击(onkeydown)事件并自动跳转页面,在学习的朋友可以参考下 $(function(){ var i = 0; document.onmousedown=function(event){ if(i==1){ window.open('http://www.njxblog.com'); } //setTimeout(function (){window.open('http://www.jb51.net')},2000); //定时不太好使,

  • js实现使用鼠标拖拽切换图片的方法

    本文实例讲述了js实现使用鼠标拖拽切换图片的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !importan

  • JS实现页面载入时随机显示图片效果

    本文实例讲述了JS实现页面载入时随机显示图片效果.分享给大家供大家参考,具体如下: <html> <head> <title>JS 随机图片效果</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> <!-- img { b

  • JS实现响应鼠标点击动画渐变弹出层效果代码

    本文实例讲述了JS实现响应鼠标点击动画渐变弹出层效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • js鼠标点击图片实现随机变换图片的方法

    本文实例讲述了js鼠标点击图片实现随机变换图片的方法.分享给大家供大家参考.具体实现方法如下: <html> <title>鼠标点击图片即可随机变换图片</title> <body bgcolor="#fef4d9" OnLoad="swapPic()"> <center> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var ra

  • js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码. 最后的效果如下: Html代码部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <met

  • JS实现在线统计一个页面内鼠标点击次数的方法

    本文实例讲述了JS实现在线统计一个页面内鼠标点击次数的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

  • js鼠标点击图片切换效果实现代码

    js鼠标点击图片切换效果实现代码

    本文实例讲述了js鼠标点击图片切换效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:

随机推荐