一般tips都是文字,这个可以支持图片,很漂亮:

 
<script type="text/javascript">   

    // Load this script once the document is ready
$(document).ready(function () { // Get all the thumbnail
$('div.thumbnail-item').mouseenter(function(e) { // Calculate the position of the image tooltip
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top; // Set the z-index of the current item,
// make sure it's greater than the rest of thumbnail items
// Set the position and display the image tooltip
$(this).css('z-index','15')
.children("div.tooltip")
.css({'top': y + 10,'left': x + 20,'display':'block'}); }).mousemove(function(e) { // Calculate the position of the image tooltip
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top; // This line causes the tooltip will follow the mouse pointer
$(this).children("div.tooltip").css({'top': y + 10,'left': x + 20}); }).mouseleave(function() { // Reset the z-index and hide the image tooltip
$(this).css('z-index','1')
.children("div.tooltip")
.animate({"opacity": "hide"}, "fast");
}); }); </script>

CSS文件如下:

<style>   

.thumbnail-item {
/* position relative so that we can use position absolute for the tooltip */
position: relative;
float: left;
margin: 0px 5px;
} .thumbnail-item a {
display: block;
} .thumbnail-item img.thumbnail {
border:3px solid #ccc;
} .tooltip {
/* by default, hide it */
display: none;
/* allow us to move the tooltip */
position: absolute;
/* align the image properly */
padding: 8px 0 0 8px;
} .tooltip span.overlay {
/* the png image, need ie6 hack though */
background: url(images/overlay.png) no-repeat;
/* put this overlay on the top of the tooltip image */
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 350px;
height: 200px;
}
</style>

HTML代码:

<div class="thumbnail-item">
<a href="#"><img src="data:images/small1.jpg" class="thumbnail"/></a>
<div class="tooltip">
<img src="data:images/big1.jpg" alt="" width="330" height="185" />
<span class="overlay"></span>
</div>
</div> <div class="thumbnail-item">
<a href="#"><img src="data:images/small2.jpg" class="thumbnail"/></a>
<div class="tooltip">
<img src="data:images/big2.jpg" alt="" width="330" height="185" />
<span class="overlay"></span>
</div>
</div> <div class="thumbnail-item">
<a href="#"><img src="data:images/small3.jpg" class="thumbnail"/></a>
<div class="tooltip">
<img src="data:images/big3.jpg" alt="" width="330" height="185" />
<span class="overlay"></span>
</div>
</div>

jQuery制作鼠标经过显示图片大图,生成图片tips效果的更多相关文章

  1. 杠杠做的全屏随鼠标滚动显示图片,类似于PPT效果

    图片有22张,是一张张加载的,耐心点,鼠标一直尝试向下滚就行了. 图片来自<天空之境:乌尤尼盐沼>,一个好美好美的地方 引个流,欢迎去我的博客看看:http://blog.cxycs.co ...

  2. jQuery实现鼠标划过展示大图的方法

    这篇文章主要介绍了jQuery实现鼠标划过展示大图的方法,实例分析了jQuery操作鼠标事件及图片处理的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jQuery实现鼠标划过展示大图 ...

  3. jQuery实现鼠标悬停显示提示信息窗口的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery - 制作点击显示二级菜单效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. JS实现 鼠标放上去 图片自动放大的效果

    前段时间做项目,要实现,一张图片,鼠标放上去图片自动变大的效果,虽然难度不大,但当时也想了一段时间,当时没时间记录一下,现在有时间了,写篇博客把代码给记录一下: 效果如下: 代码如下: <!DO ...

  6. wpf image控件循环显示图片 以达到动画效果 问题及解决方案

    1>最初方案: 用wpf的image控件循环显示图片,达到动画效果,其实就是在后台代码动态改变Image.Source的值,关键代码: ; i < ; i++)//六百张图片 { Bitm ...

  7. jQuery实现鼠标移入切换图片

    初始效果: 鼠标移入效果: 首先添加jQuery库,我这边直接引用百度CDN地址 <script src="https://apps.bdimg.com/libs/jquery/2.1 ...

  8. jquery easyui鼠标右击显示自定义的菜单

    1.datagrid表格中,对某一行鼠标右击,显示出如下的自定义的菜单: 在html页面中写: <div id="menu" class="easyui-menu& ...

  9. Qt5制作鼠标悬停显示Hint的ToolTip

    在日常生活中的使用的软件中,我们经常会遇到这样的情况. 我们在网页上,有些网页链接的文字(比如文章标题,知乎问题标题,百度的词条等)因为太长了,而显示不出来,但是鼠标悬停在上面的时候就可以显示出来.  ...

随机推荐

  1. Dubbo学习(四) dubbo的特点,8种通信协议之对比

    一.dubbo的特性 (1) 连通性: 注册中心负责服务地址的注册与查找,相当于目录服务,服务提供者和消费者只在启动时与注册中心交互,注册中心不转发请求,压力较小 监控中心负责统计各服务调用次数,调用 ...

  2. 深入理解JAVA虚拟机阅读笔记2——垃圾回收

    线程私有的程序计数器.虚拟机栈和本地方法栈随线程而生,随线程而灭.栈中的栈帧随方法的进入和退出有条不紊的入栈和出栈. 而Java堆和方法区因为需要多大内存.创建多少对象都是不确定的,因此这两个区域是垃 ...

  3. Qt——基本工具的使用

    本文主要介绍在windows系统中使用C++编写Qt程序所需要的一些工具,不会具体地讲工具怎么使用. 其它系统的安装本文不会涉及,在http://wiki.qt.io/Main中,有关于各种系统qt安 ...

  4. BZOJ2529 [Poi2011]Sticks 【贪心】

    题目链接 BZOJ2529 题解 要组成三角形,当且仅当最长边长度小于另两条边之和 我们就枚举最长边,另两条边当然是越大越好 我们将所有边排序,从小枚举并记录各个颜色的最长边 当枚举到当前边时,找到除 ...

  5. WEB入门.七 CSS布局模型

    学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...

  6. Java考试题之九

    QUESTION 177 Given: 1.     class TestException extends Exception { } 2.     class A { 3.     public ...

  7. 小技巧--tab键自动补齐Git命令

    Git是什么,你不清楚? 好吧,那么该篇内容对你也木有帮助,请绕道而行.. 我们在使用Git命令时,可以通过tab键,自动补齐Git,特别是在切换分支时特别有用. 如下,当我们想将当前分支切换到bug ...

  8. 解题:NOI 2009 管道取珠

    题面 考虑这个平方的实际意义,实际是说取两次取出一样的序列 那么设$dp[i][j][k][h]$表示第一次在上面取$i$个下面取$j$个,第二次在上面取$k$个下面取$h$个的方案数 等等$n^4$ ...

  9. bzoj 4332:JSOI2012 分零食

    描述 这里是欢乐的进香河,这里是欢乐的幼儿园. 今天是2月14日,星期二.在这个特殊的日子里,老师带着同学们欢乐地跳着,笑着.校长从幼儿园旁边的小吃店买了大量的零食决定分给同学们.听到这个消息,所有同 ...

  10. laravel mapSpread 例子

    $collection = collect(range(1, 9)); $chunks = $collection->chunk(2); $labeld = $chunks->mapSpr ...