<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        img{

            position: absolute;   /*因为跟着鼠标移动，不占用位置，所以使用绝对定位*/

        }

    </style>

</head>

<body>

    <img src="./images/tianshi.jpg" alt="">

    <script>

        var pic = document.querySelector('img')

       document.addEventListener('mousemove',function(e){

           //1.mousemove 只要鼠标移动1px 就会除服事件

           //2.核心原理：每次鼠标移动，我们都会获取最新的鼠标坐标，把这个x和y坐标作为图片的top和left值

           //就可以移动图片了

           var x = e.pageX;

           var y= e.pageY; //page返回的是从可以滚动条的最顶端开始到鼠标点击Y轴的坐标    ie9+以上支持  最常用

           console.log(x,y)

           pic.style.left=x + 'px';   //注意一定要增加单位

           pic.style.top=y + 'px';

       })

    </script>

</body>

</html>

js 图片跟随鼠标移动效果 案例的更多相关文章

  1. JS 图片跟随鼠标移动案例

    css代码 img { position: absolute; /* top: 2px; */ width: 50px; height: 50px; } HTML代码 <img src=&quo ...

  2. js图片跟随鼠标移动

    <div id="wrapper"><img src="http://images.cnblogs.com/cnblogs_com/rain-null/ ...

  3. jQuery实际案例⑥——图片跟随鼠标、五角星评分案例

    一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...

  4. Ant Design -- 图片可拖拽效果，图片跟随鼠标移动

    Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(pro ...

  5. JS图片自己主动轮换效果实现

    今天不在状态,五一快到了,俺就特想玩了.好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自己主动轮换效果,先看图片 以下是详细的代码,还是比較简单的. <!DOCTYPE ht ...

  6. JS实现图片跟随鼠标移动

    在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里. 我们用到的只有这个对象的两个属性,clientX与cli ...

  7. JS框架_(JQuery.js)图片相册掀开切换效果

    百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  8. Js 图片轮播渐隐效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. Unity3D GUI中的图片跟随鼠标旋转脚本

    var Mid : Texture2D; var mouse : Texture2D; //鼠标图片 var mousePs = Vector2.zero; //鼠标的位置 private var a ...

随机推荐

  1. ES安装简记

    JDK # java -versionjava version "1.8.0_231"Java(TM) SE Runtime Environment (build 1.8.0_23 ...

  2. 基于war的Spring Boot工程

    一.简介 前面创建的Spring Boot工程最终被打为了Jar包,是以可执行文件的形式出现的,其使用了Spring Boot内嵌的Tomcat作为Web服务器来运行web应用的.新版Dubbo的监控 ...

  3. Hibernate的基本功能：对数据库的增删改查（创建对象实例）

    一.通过实例化的对象向数据库添加新记录 package com.yh.test; import org.hibernate.Session; import org.hibernate.SessionF ...

  4. 【力扣】82. 删除排序链表中的重复元素 II

    存在一个按升序排列的链表,给你这个链表的头节点 head ,请你删除链表中所有存在数字重复情况的节点,只保留原始链表中 没有重复出现 的数字. 返回同样按升序排列的结果链表. 示例 1: 输入:hea ...

  5. 【Jenkins系列】-备份机制

    Jenkins是主从模式,从节点可以做集群.负载,从而实现从节点的高可用,但是主节点是单节点,一旦主节点宕机,会导致Jenkins服务不可用.Jenkins主节点本身是不支持集群的,需要通过其他变通方 ...

  6. 带你揭开WebSerivce的面纱

    最近在工作中遇到这样的一个项目(暂且定为项目A),项目A本身是用PHP开发的,但是其数据是来自于另一个使用java开发的项目(暂且定为项目B),项目A不能操作项目B的数据库,它有其自己的一套数据库,只 ...

  7. Java 多线程的一次整理

    一天没有出过家门,实属无聊,没事瞎写写 1. 基本概念 1.1 多进程和多线程的概念 程序是由指令和数据组成,指令要运行,数据要加载,指令被 CPU 加载运行,数据被加载到内存,指令运行时可由 CPU ...

  8. C++STL标准库学习笔记（五）set

    前言: 在这个笔记中,我把大多数代码都加了注释,我的一些想法和注解用蓝色字体标记了出来,重点和需要关注的地方用红色字体标记了出来,这一篇后面主要都是我的记录了,为了防止大片蓝色字体出现,后面就不改蓝色 ...

  9. Jenkins配置java项目

    目录 一.场景介绍 二.项目配置 配置插件 配置项目 一.场景介绍 在部署完Jenkins后,需要将现有的maven项目(Jenkis的开源插件),放到Jenkins上,用于自动化运维的改造. 项目地 ...

  10. 搭建直接通过CPU执行汇编语言的环境

    搭建直接通过CPU执行汇编语言环境 我们通过编译写好的汇编语言代码可以生成.bin的机器语言二进制代码.但是这个.bin程序我们该如何运行呢? 这里其实有两个办法: 1: 将其作为一个Windows/ ...