js 图片跟随鼠标移动效果 案例
<!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 图片跟随鼠标移动效果 案例的更多相关文章
- JS 图片跟随鼠标移动案例
css代码 img { position: absolute; /* top: 2px; */ width: 50px; height: 50px; } HTML代码 <img src=&quo ...
- js图片跟随鼠标移动
<div id="wrapper"><img src="http://images.cnblogs.com/cnblogs_com/rain-null/ ...
- jQuery实际案例⑥——图片跟随鼠标、五角星评分案例
一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...
- Ant Design -- 图片可拖拽效果,图片跟随鼠标移动
Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(pro ...
- JS图片自己主动轮换效果实现
今天不在状态,五一快到了,俺就特想玩了.好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自己主动轮换效果,先看图片 以下是详细的代码,还是比較简单的. <!DOCTYPE ht ...
- JS实现图片跟随鼠标移动
在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里. 我们用到的只有这个对象的两个属性,clientX与cli ...
- JS框架_(JQuery.js)图片相册掀开切换效果
百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- Js 图片轮播渐隐效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- Unity3D GUI中的图片跟随鼠标旋转脚本
var Mid : Texture2D; var mouse : Texture2D; //鼠标图片 var mousePs = Vector2.zero; //鼠标的位置 private var a ...
随机推荐
- 监控Linux服务器网站状态的SHELL脚本
1,监控httpd状态码的shell脚本代码. #!/bin/sh #site: www.jquerycn.cn # website[0]=www.jquerycn.cn/chuzu/' #网站1 m ...
- Classs类
Classs类如何获得 获得Class对象 方式一: 通过Object类中的getClass()方法 方式二: 通过 类名.class 获取到字节码文件对象( 方式三: 通过Class类中的方法(将类 ...
- 【Linux】【Services】【Web】Haproxy
1. 概念 1.1. 官方网站 http://www.haproxy.org/ 2. 安装 yum安装 yum -y install haproxy keepalived 配置haproxy日志,修改 ...
- 用户信息系统_serviceImpl
package com.hopetesting.service.impl;import com.hopetesting.dao.UserDao;import com.hopetesting.dao.i ...
- MyBatis一对多映射简单查询案例(嵌套结果)
一.案例描述 书本类别表和书本信息表,查询书本类别表中的某一记录,连带查询出所有该类别书本的信息. 二.数据库表格 书本类别表(booktypeid,booktypename) 书本信息表(booki ...
- Mysql从头部署多个版本
目录 一.环境准备 二.下载安装包 三.Mysql-5.6单独部署 四.Mysql-5.7单独部署 五.添加到多版本控制 六.muliti使用 一.环境准备 系统:centos7.3一台 软件版本:m ...
- bjdctf_2020_babyrop2(没有成功拿到shell)
看到程序先例行检查一下 可以看到开启了canary和nx保护,需要注意的是这个acnary 将程序放入ida中shift+f12 没有关键性函数.我们进入main函数中 在main的gift程序里面我 ...
- w4sp-lab安装
扯淡 i春秋有个答题活动,苟了个奖品,我选了一本书:<wireshark与metasploit实战指南>,里面有个配套环境,本来看着书上说使用docker搭建的,以为很简单,只需要pull ...
- Spring5 概述及Spring IOC学习
Spring Framework 5 1. Spring框架 1.1 Spring框架概述 1.2 主要内容 Spring框架是一个开源的JavaEE的应用程序 主要核心是 IOC(控制反转)和AOP ...
- redis集群搭建,使用注意
https://www.cnblogs.com/vieta/p/11192137.html https://blog.csdn.net/qq_42815754/article/details/8291 ...