jQuery制作鼠标经过显示图片大图,生成图片tips效果
一般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效果的更多相关文章
- 杠杠做的全屏随鼠标滚动显示图片,类似于PPT效果
图片有22张,是一张张加载的,耐心点,鼠标一直尝试向下滚就行了. 图片来自<天空之境:乌尤尼盐沼>,一个好美好美的地方 引个流,欢迎去我的博客看看:http://blog.cxycs.co ...
- jQuery实现鼠标划过展示大图的方法
这篇文章主要介绍了jQuery实现鼠标划过展示大图的方法,实例分析了jQuery操作鼠标事件及图片处理的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jQuery实现鼠标划过展示大图 ...
- jQuery实现鼠标悬停显示提示信息窗口的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery - 制作点击显示二级菜单效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JS实现 鼠标放上去 图片自动放大的效果
前段时间做项目,要实现,一张图片,鼠标放上去图片自动变大的效果,虽然难度不大,但当时也想了一段时间,当时没时间记录一下,现在有时间了,写篇博客把代码给记录一下: 效果如下: 代码如下: <!DO ...
- wpf image控件循环显示图片 以达到动画效果 问题及解决方案
1>最初方案: 用wpf的image控件循环显示图片,达到动画效果,其实就是在后台代码动态改变Image.Source的值,关键代码: ; i < ; i++)//六百张图片 { Bitm ...
- jQuery实现鼠标移入切换图片
初始效果: 鼠标移入效果: 首先添加jQuery库,我这边直接引用百度CDN地址 <script src="https://apps.bdimg.com/libs/jquery/2.1 ...
- jquery easyui鼠标右击显示自定义的菜单
1.datagrid表格中,对某一行鼠标右击,显示出如下的自定义的菜单: 在html页面中写: <div id="menu" class="easyui-menu& ...
- Qt5制作鼠标悬停显示Hint的ToolTip
在日常生活中的使用的软件中,我们经常会遇到这样的情况. 我们在网页上,有些网页链接的文字(比如文章标题,知乎问题标题,百度的词条等)因为太长了,而显示不出来,但是鼠标悬停在上面的时候就可以显示出来. ...
随机推荐
- Dubbo学习(四) dubbo的特点,8种通信协议之对比
一.dubbo的特性 (1) 连通性: 注册中心负责服务地址的注册与查找,相当于目录服务,服务提供者和消费者只在启动时与注册中心交互,注册中心不转发请求,压力较小 监控中心负责统计各服务调用次数,调用 ...
- 深入理解JAVA虚拟机阅读笔记2——垃圾回收
线程私有的程序计数器.虚拟机栈和本地方法栈随线程而生,随线程而灭.栈中的栈帧随方法的进入和退出有条不紊的入栈和出栈. 而Java堆和方法区因为需要多大内存.创建多少对象都是不确定的,因此这两个区域是垃 ...
- Qt——基本工具的使用
本文主要介绍在windows系统中使用C++编写Qt程序所需要的一些工具,不会具体地讲工具怎么使用. 其它系统的安装本文不会涉及,在http://wiki.qt.io/Main中,有关于各种系统qt安 ...
- BZOJ2529 [Poi2011]Sticks 【贪心】
题目链接 BZOJ2529 题解 要组成三角形,当且仅当最长边长度小于另两条边之和 我们就枚举最长边,另两条边当然是越大越好 我们将所有边排序,从小枚举并记录各个颜色的最长边 当枚举到当前边时,找到除 ...
- WEB入门.七 CSS布局模型
学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...
- Java考试题之九
QUESTION 177 Given: 1. class TestException extends Exception { } 2. class A { 3. public ...
- 小技巧--tab键自动补齐Git命令
Git是什么,你不清楚? 好吧,那么该篇内容对你也木有帮助,请绕道而行.. 我们在使用Git命令时,可以通过tab键,自动补齐Git,特别是在切换分支时特别有用. 如下,当我们想将当前分支切换到bug ...
- 解题:NOI 2009 管道取珠
题面 考虑这个平方的实际意义,实际是说取两次取出一样的序列 那么设$dp[i][j][k][h]$表示第一次在上面取$i$个下面取$j$个,第二次在上面取$k$个下面取$h$个的方案数 等等$n^4$ ...
- bzoj 4332:JSOI2012 分零食
描述 这里是欢乐的进香河,这里是欢乐的幼儿园. 今天是2月14日,星期二.在这个特殊的日子里,老师带着同学们欢乐地跳着,笑着.校长从幼儿园旁边的小吃店买了大量的零食决定分给同学们.听到这个消息,所有同 ...
- laravel mapSpread 例子
$collection = collect(range(1, 9)); $chunks = $collection->chunk(2); $labeld = $chunks->mapSpr ...