图片跟随鼠标

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8">
 5         <style>
 6
 7         img{
 8             position: absolute;
 9         }
10         </style>
11     </head>
12     <body>
13     <img src="img/ts.gif" alt="">
14             <script src="jquery-1.11.1.min.js"></script>
15             <script>
16                 $(function () {
17                     $(document).on(‘mousemove‘,function(e){
18                         var h=$(‘img‘).height()/2;
19                         var y=$(‘img‘).width()/2;
20                         $(‘img‘).offset({
21                             ‘left‘:e.pageX-h,
22                             ‘top‘:e.pageY-y
23                         })
24                     })
25                 })
26             </script>
27
28     </body>
29 </html>

原文地址:https://www.cnblogs.com/yangguoe/p/8175630.html

时间: 2024-08-29 14:15:44

图片跟随鼠标的相关文章

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

一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距离页面左侧.顶部的距离通过event.pageX.event.pageY,然后通过修改图片的left.top值即可. 二.五角星评分案例 1.如图:业务逻辑:①鼠标移入某颗星时,这颗及之前的都变实心:②未点击,移开评分区,所有星变空心:③点击,移开评分区,点击过的星及之前的变实心 2.用到的方法:e

图片跟随鼠标移动

关键点: 1.图片采用绝对定位 2.事件:mousemove 3.偏移距离 offset(),   .offset().left  | .offset().top $("#mem-box-mouse").css({ "left": pointX - $memBox.offset().left - 50,//图片跟随鼠标移动,判断图片在背景区域内的位置 鼠标位置-背景框相对于页面的距离:mouseX - offset().left, "top":

图片跟随鼠标移动(精简版跨浏览器实现)

网上看到许多让图片跟随鼠标移动,感觉代码很复杂,还不兼容,其实可以很简单的实现: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="

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

Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(props); this.dragDrop = false; // 图片是否被拖动中 this.apartX = 0; // 鼠标在图片中与图片左上角的X轴的距离 this.apartY = 0; //鼠标在图片中与图片左上角的Y轴的距离 this.state = { value: 1, previewV

js图片跟随鼠标移动

<div id="wrapper"><img src="http://images.cnblogs.com/cnblogs_com/rain-null/1038612/o_33.jpg" alt="ss"/> <img id="hh"src="http://images.cnblogs.com/cnblogs_com/rain-null/1038612/o_33.jpg" al

JS 图片跟随鼠标移动案例

css代码 1 img { 2 position: absolute; 3 /* top: 2px; */ 4 width: 50px; 5 height: 50px; 6 } HTML代码 <img src="../imges/u=3568135932,2181685849&fm=26&gp=0.jpg" alt=""> js代码 1 <script> 2 var pic = document.querySelector('

JS跟随鼠标旋转的图片

<html> <head> <title>JS跟随鼠标旋转的图片丨Daniel wellington</title> <script> <!-- Beginning of JavaScript - var x,y var step=5 var flag=1 var pause var timersmall var timerbig var isbigcircle=1 var pause=50 var bigradius var smallr

win10 指针焦点自动跟随鼠标

Linux或者ubuntu系统中有个Focus-follows-mouse功能:鼠标指哪,键盘的焦点就指向哪,甚至可以让鼠标所在的窗口实时处于最顶层,达到真正的焦点跟随鼠标.通俗的讲就是,如果在多窗口的状态下,如果我们要对其中一个窗口进行一些操作,必须点击一下那个窗口(目的是让该窗口获取焦点),而focus-follow-mouse 功能让你只需要将鼠标指针移动到该窗口上面就可以对该窗口进行操作,不需要再点击一下.看似一个很简单的功能,确极为方便(尤其是对题主这种不喜欢在触控板上做点击操作的人)

阻止右键菜单(阻止默认事件)&amp;&amp;跟随鼠标移动(大图展示)&amp;&amp;自定义右键菜单

<!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"> <head> <meta http-equiv="Content-