【技术】提示浮层跟随鼠标移动

效果图：

<br/><br/><br/>
<a class="preview">把鼠标放到这里1</a>
<br/><br/><br/>
<a class="preview">把鼠标放到这里2</a>
<br/><br/><br/>
<a class="preview">把鼠标放到这里3</a>
<br/><br/><br/>
<a class="preview">把鼠标放到这里4</a>
<br/><br/><br/>
<a class="preview">把鼠标放到这里5</a>

#preview{
border:1px solid #cccccc;
background:#9900CC;color:#fff;
padding:5px;
display:none;
position:absolute;
}

this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// 可以自己设定偏移值
/* END CONFIG */
$("a.preview").hover(function(e){
$("body").append("<div id=‘preview‘>jquery实现简单文字提示</div>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("slow");
},
function(){
$("#preview").fadeOut("fast");
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// 页面加载完执行
$(document).ready(function(){
imagePreview();
});

时间： 2024-10-08 23:55:24

【技术】提示浮层跟随鼠标移动的相关文章

提示框跟随鼠标移动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .box{width:500px;margin: 300px auto;border: solid 1px black;position: rel

javascript 跟随鼠标移动的提示框的一个小demo

下面提供一种跟随鼠标移动的提示框的思路,方便在以后工作中应用,主要是应用到鼠标移动产生的数值来进行移动提示框的定位... CSS代码   .box{height:100px;width:100px;background:orange;position:relative;margin:40px;} .move{height:20px;width:20px;background:red;position:absolute;left:0px;top:0px;display:none;} HTML代码

关于wpf中popup跟随鼠标移动显示

最近在做一个画图工具,里面有一个功能是需要实现,当鼠标移动的时候在,鼠标的旁边显示坐标信息. 第一反应是想到了tooltip,但是tooltip有许多的限制,查询资料的过程中看到了popup,popup比tooltip更加灵活,下面讲讲tooltip跟popup的区别: 1.tooltip会自动显示,自动隐藏,而popup则需要设置IsOpen属性,并且在Popup.StaysOen属性为true时,Popup控件会一直显示,直到显式地将IsOpen属性设置为False.当Popup.Stays

jQuery-鼠标经过显示大图并跟随鼠标效果插件

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=281 今天看完了<JavaScript语言精粹>这本书,还有时间,就决定写写jQuery插件练练手,实现的效果是,鼠标移到缩略图上会显示该图的大图,并且大图跟随鼠标移动:或是移动到提示文字上,也可以显示图片.并且含有方向判别功能,具体来说就是如果缩略图在页面的左半部分,则大图显示在鼠标的右侧,如果缩略图在页面的右半部

虚拟摇杆跟随鼠标

EasyTouch的joystick跟随鼠标 1 using UnityEngine; 2 using System.Collections; 3 4 public class JoystickPosControll : MonoBehaviour 5 { 6 7 public EasyJoystick m_EasyJoystick; 8 9 public Vector2 offset; 10 11 public Camera m_Camera; 12 13 public Vector2 bil

win10 指针焦点自动跟随鼠标

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

html5跟随鼠标炫酷网站引导页动画特效

html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/texiao/html5/ 效果图: 以下是源代码: 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Co

阻止右键菜单（阻止默认事件）&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-

鼠标悬浮弹出跟随鼠标移动的带箭头的信息层

鼠标悬浮弹出跟随鼠标移动的带箭头的信息层:很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"