以下推存一下代码
<!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>图片提示</title>
<script type="text/javascript" src="jquery1.4.2.js"></script>
<style type="text/css">
/* tooltip import*/
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script type="text/javascript">
//<![CDATA[
$(function(){
var x =10;
var y =20;
$("a.tooltip").mouseover(function(e){
this.myTitle =this.title;
this.title ="";
var imgTitle =this.myTitle?"<br/>"+this.myTitle : "";
var tooltip ="<div id='tooltip'><img src='"+this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY+y) +"px",
"left": (e.pageX+x) +"px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function(){
this.title =this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) +"px",
"left": (e.pageX+x) +"px"
});
});
})
//]]>
</script>
</head>
<body>
<h3>有效果：</h3>
<ul>
<li><a href="jquerybook.jpg" class="tooltip" title="风光 iPod">
<img src="jquerybook.jpg" alt="风光 iPod"/></a></li>
</ul>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
</body>
</html>
注意：
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
控制大图显示
<a href="jquerybook.jpg" class="tooltip" title="风光 iPod">
<img src="jquerybook.jpg" alt="风光 iPod"/></a>
/*title :大图所显示标题，当无标题时，去掉title
href:为显示大图的图片路径
*/
带附件下载
分享到：
相关推荐
"jQuery鼠标悬停放大图片"是一个常见的功能，它可以使用户在鼠标指针悬停在图片上时看到放大的图像细节，从而增强视觉效果和用户对图片内容的理解。这个例子中，我们将深入探讨如何使用jQuery库实现这一功能，并涉及...
如果图片需要在放大时显示不同的高分辨率版本，可以在HTML中使用`data-big-src`属性存储大图URL，然后在`mouseenter`事件中替换图片源： ```javascript $(this).attr('src', $(this).data('big-src')); ``` 最后，...
《jQuery鼠标悬停显示大图特效的实现与应用》 在网页设计中，为了提升用户体验，经常需要在用户鼠标悬停在某个元素上时展示更详细的信息，例如图片的高清版本。jQuery作为一种强大的JavaScript库，提供了丰富的功能...
本文将详细解析"Jquery相册鼠标经过放大图片插件实例源码"这一主题，旨在帮助开发者理解和应用这一技术。 首先，jQuery相册功能是网页设计中常见的元素，用于展示一组图片，通常具有分页、滑动和缩放等交互效果。而...
总结来说，这个“jquery鼠标经过图片显示悬浮按钮图片特效”涉及到的核心技术有jQuery的选择器、事件处理、动画方法，以及CSS的定位、过渡效果。掌握这些基础，你就能创建出更多富有创意的网页交互效果。
《jQuery鼠标悬停横向大图展示特效：打造互动性图片相册》 在网页设计中，动态效果常常能提升用户体验，使网站更具吸引力。"jQuery鼠标悬停横向大图展示特效"是这样一种技术，它巧妙地利用了jQuery库的强大功能，...
本项目"jQuery简单实现鼠标经过小图显示大图"就是基于这个需求而设计的。 首先，我们需要在HTML中设置基本结构。通常，我们会有一个包含小图的列表（ul或div），每个小图都有一个对应的隐藏大图。例如： ```html ...
在这个特定的案例中，“jQuery 图片特效，鼠标经过图标高亮显示”是一种增强用户体验的技术，当用户将鼠标悬停在图标上时，图标会变得更为醒目，吸引用户的注意力并提供视觉反馈。 实现这一效果的基本步骤如下： 1...
这就是“Jquery鼠标移小图显示大图”这一技术的应用。这个功能可以提升用户体验，使用户在不离开当前页面的情况下预览图片的详细细节。在本案例中，我们将探讨如何使用jQuery库和相关的HTML、CSS以及JavaScript技术...
本资源"jQuery鼠标经过显示二维码代码.zip"提供了一个利用jQuery实现的独特功能，即当鼠标悬停在特定元素上时，会显示一个二维码。这种效果在网站设计中可以增加互动性和用户体验，比如在产品介绍或名片展示中。 ...
本项目“jQuery鼠标经过图片局部放大”提供了一种方法，能够在用户将鼠标悬停在图片上时，实现图片的局部放大效果，特别是在产品展示或者细节呈现时尤为实用。这个效果对于IE8及以上的浏览器都是兼容的，满足了对老...
《jQuery鼠标悬停图片震动特效》 在网页设计中，动态效果往往能吸引用户的注意力，提升用户体验。"jQuery鼠标悬停图片震动特效"就是这样一种巧妙的技术应用，它结合了CSS3的圆角样式和jQuery库，实现了当鼠标悬停在...
在“Jquery鼠标放在小图片显示大图片”这个场景中，我们利用 jQuery 实现了一个常见的交互功能：当用户将鼠标悬停在小图片上时，显示该图片的放大版本。这个功能在产品展示、图像预览等方面非常实用，可以提升用户...
在网页设计中，为了提升用户体验，常常会使用各种交互效果，其中一种常见且实用的效果是鼠标经过缩略图时图片放大。本实例将探讨如何利用jQuery实现这一功能，为用户提供更加直观、生动的视觉体验。 jQuery是一个轻...
在网页设计中，"JQuery 鼠标移到小图上显示大图"是一种常见的交互效果，用于增强用户体验。这个效果通常应用于商品展示或者图片预览，用户将鼠标悬停在缩略图（小图）上时，会弹出一个预览窗口显示对应的全尺寸图片...
"jQuery鼠标悬浮图片放大效果"就是一个很好的例子，它使得用户在浏览商品图片时能够更清楚地查看细节，从而增强购物体验。这个效果在电商网站如淘宝上广泛使用，今天我们将会详细探讨如何使用jQuery实现这一功能。 ...
《jQuery鼠标滑过预览大图特效：JS代码与实现详解》 在Web开发中，提升用户体验是至关重要的。一种常见的方法是通过鼠标滑过图片时预览大图的特效，这种功能使得用户无需点击就能查看图片的细节，极大地提高了浏览...
当鼠标进入`#normalImage`时，大图显示并放大；离开时，大图隐藏并恢复原大小。 以上就是使用jQuery实现“hover图片放大特效”的详细步骤。通过这样的方法，我们可以为网站的图片添加生动的交互体验，提高用户体验...