`
yl.fighter
  • 浏览: 258192 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

提示浮层跟随鼠标移动

    博客分类:
  • Web
阅读更多
index.html

<!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-Type" content="text/html; charset=UTF-8">

<title>Image Preview with jQuery</title>
<meta name="description" content="Easiest jQuery Tooltip Ever">
<script src="./Image Preview with jQuery_files/jquery.js" type="text/javascript"></script>
<script src="./Image Preview with jQuery_files/main.js" type="text/javascript"></script>

<style>
body { margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%;}

h1{font-size:180%;	font-weight:normal;	color:#555;}
h2{	clear:both;	font-size:160%;	font-weight:normal;	color:#555;	margin:0;	padding:.5em 0;}
a{	text-decoration:none;	color:#f30;	}
p{	clear:both;	margin:0;	padding:.5em 0;}
pre{	display:block;	font:100% "Courier New", Courier, monospace;	padding:10px;	border:1px solid #bae2f0;	background:#e3f4f9;		margin:.5em 0;overflow:auto;	width:800px;}

img{border:none;}
ul,li{	margin:0;	padding:0;}
li{	list-style:none;	float:left;	display:inline;	margin-right:10px;}

/*  */
#preview{	position:absolute;	border:1px solid #ccc;	background:#333;	padding:5px;	display:none;	color:#fff;	}
/*  */
</style>
</head>
<body>

	<h1>Easy Image Preview with jQuery</h1>
	
	<h2>Image gallery  (without caption)</h2>
	<ul>
		<li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/1.jpg" class="preview" title=""><img src="./Image Preview with jQuery_files/1s.jpg" alt="gallery thumbnail"></a></li>
		<li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/2.jpg" class="preview" title=""><img src="./Image Preview with jQuery_files/2s.jpg" alt="gallery thumbnail"></a></li>
		<li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/3.jpg" class="preview" title=""><img src="./Image Preview with jQuery_files/3s.jpg" alt="gallery thumbnail"></a></li>
		<li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/4.jpg" class="preview" title=""><img src="./Image Preview with jQuery_files/4s.jpg" alt="gallery thumbnail"></a></li>
	</ul>

	<h2>Image gallery (with caption)</h2>
	<ul>
		<li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/1.jpg" class="preview" title="Lake and a mountain"><img src="./Image Preview with jQuery_files/1s.jpg" alt="gallery thumbnail"></a></li>
		<li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/2.jpg" class="preview" title="Fly fishing"><img src="./Image Preview with jQuery_files/2s.jpg" alt="gallery thumbnail"></a></li>
		<li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/3.jpg" class="preview" title="Autumn"><img src="./Image Preview with jQuery_files/3s.jpg" alt="gallery thumbnail"></a></li>
		<li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/4.jpg" class="preview" title="Skiing on a mountain"><img src="./Image Preview with jQuery_files/4s.jpg" alt="gallery thumbnail"></a></li>
	</ul>

</body>
</html>


main.js
this.imagePreview = function(){	
	/* CONFIG */
		
		xOffset = 10;
		yOffset = 30;
		
	/* END CONFIG */
	$("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");								 
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};


// starting the script on page load
$(document).ready(function(){
	imagePreview();
});

分享到:
评论

相关推荐

    jquery实现的提示浮层跟随鼠标移动

    ### jQuery 实现提示浮层跟随鼠标移动的知识点详解 #### 一、背景介绍与应用场景 在Web开发中,用户体验是至关重要的一个方面。一个常见且实用的功能就是当用户将鼠标悬停在某个元素上时,会出现一个提示浮层来...

    浮层的移动

    3. **坐标计算**:在`mousemove`事件中,计算鼠标与浮层初始点击点的偏移量,然后将这个偏移量应用到浮层的CSS `top` 和 `left` 属性上,使浮层跟随鼠标移动。 4. **边界检测**:为了防止浮层移出屏幕,可能需要...

    JS实现动态移动层及拖动浮层关闭的方法

    在鼠标移动过程中,`DIVMove`函数持续更新`&lt;div&gt;`元素的位置,使得元素跟随鼠标的移动。当用户释放鼠标时,`DIVUp`函数将`Obj`设置为`none`,结束拖动状态。 2. **关闭功能**: 关闭功能通过点击关闭按钮来触发。...

    图片的局部放大(放大镜效果)

    核心的实现思路是:创建一个透明的浮层(通常为div元素),作为放大镜的“镜头”,并设置其大小和位置,使其跟随鼠标移动。当鼠标在原始图片上移动时,获取鼠标相对图片的位置坐标,并根据这些坐标计算出需要放大的...

    wpf放大镜例子

    鼠标移动时,放大镜窗口的位置应跟随鼠标指针,这样用户就可以看到鼠标下方的区域被放大。同时,设置一个合适的放大比例,例如2x或3x,通过改变`VisualBrush`的大小来实现放大效果。 4. **实时更新** 由于放大镜...

    jquery 放大镜

    通常,这个浮层会跟随鼠标移动,并且只显示图片的局部放大区域。 3. **jQuery事件监听**:利用jQuery的`mouseenter`、`mousemove`和`mouseleave`事件,当鼠标进入图片、在图片上移动以及离开图片时,触发相应的处理...

    javascript放大镜效果的简单实现

    此外,还有一个#showimg元素,它是一个透明的浮层,跟随鼠标移动并在小图上显示一个矩形区域,表示正在被放大的部分。 CSS部分设置了一些基本样式,如元素的位置、边框和隐藏/显示状态。#smallimg 和 #showimg 的...

    07-放大镜特效.rar

    放大窗口应该始终跟随着鼠标移动,并保持其相对于原始图像的比例。 ```css #product-image { position: relative; } #magnifier { position: absolute; top: 0; left: 0; width: 200px; /* 放大窗口宽度 */ ...

    原生js实现商品放大镜效果

    4. 更新`#float-box`的位置,使其跟随鼠标移动,同时根据公式计算并设置`#big-box`内大图的`left`和`top`属性,改变大图显示区域。 5. 当鼠标离开小图时,恢复大图和浮层的默认状态。 为了查看效果,需要将这段代码...

    C# 图片局部放大(类似于淘宝网图片放大效果)

    为了实现类似淘宝网的浮动预览效果,可以创建一个透明的浮层窗体,将放大后的图像显示在这个窗体上,跟随鼠标的移动而移动。这样,用户可以在查看大图的同时,看到图片的局部放大效果。 在提供的"WindowsForms...

    jQuery powerFloat万能浮动层下拉层插件使用介绍

    `hoverHold`布尔值控制鼠标悬停时浮动层是否保持显示,`hoverFollow`则决定了浮动层是否跟随鼠标移动。 在实际应用中,开发者可以根据需求灵活调整这些参数,以实现理想的浮动层效果。插件的多样性和易用性使其成为...

    jQuery实现可拖动的浮动层完整代码

    这样就能在用户拖动时跟随鼠标移动。 - 释放鼠标时(`mouseup`),通过`unbind()`方法移除`mousemove`事件的监听,停止拖动效果。 4. HTML结构和语义化 - 文档结构使用了`&lt;!DOCTYPE html&gt;`声明,指定了文档类型为...

    jQuery.Gantt-master.zip

    3. **鼠标悬停显示内容**:当鼠标移动到甘特图的某个条目上时,会显示详细的信息,如任务名称、开始和结束日期、负责人等。这极大地提高了用户体验,用户无需离开图表就能获取到详细信息,避免了频繁的页面跳转。 ...

    div悬浮在canvas上

    如果需要在canvas上进行动态交互,比如点击canvas时检测是否与div重叠,或者让div跟随鼠标移动,我们需要用到JavaScript。例如,可以监听canvas的`mousedown`和`mousemove`事件,然后通过计算鼠标位置与div的位置...

    JQuery特效

    `基于jQuery精美浮动层效果(JS+CSS).rar`可能包含一个浮动提示框或对话框的实现,这种效果常见于提示信息、广告或者表单验证中,它可以跟随用户的鼠标移动或固定在屏幕某一位置。 `站酷(ZCOOL)首页焦点大图代码...

    VB屏幕放大镜

    5. **动态跟踪**:当鼠标移动时,程序需要实时更新捕获和放大的区域,确保放大镜始终跟随鼠标。 6. **交互控制**:提供用户界面元素,如滑动条或菜单项,允许用户调整放大倍率、切换放大模式等。 7. **资源释放**...

    asp.net+jquery Gridview的多行拖放, 以及跨控件拖放

    当鼠标移动至可拖放区域时,会显示一个绝对定位的浮层`float`,并且根据选中的行数动态调整其高度。 4. 跨控件拖放:示例中虽然提到支持跨控件拖放,但具体实现方法没有在上述内容中详细描述。跨控件拖放通常意味着...

Global site tag (gtag.js) - Google Analytics