JQuery鼠标移到小图显示大图效果的方法
JQuery鼠标移到小图显示大图效果的方法
本文实例讲述了JQuery鼠标移到小图显示大图效果的方法。分享给大家供大家参考。具体分析如下:
这里的显示大图功能类似上一篇《JQuery实现超链接鼠标提示效果的方法》,稍微修改一下代码,就可以做出一个图片的提示效果。
参考前面的超链接提示效果的代码,只需要将创建的div元素的代码改为:
1
2
3
|
//创建 div 元素 图片提示 var tooltip = "<div id=" tooltip "><img src=" "+ this.href +" " alt=" 预览图 "><\/div>" ; </div> |
当鼠标滑过图片后,显示就会有大图提示效果。为了使效果更为人性化,还需要为图片增加说明文字,即提示出来的大图片下面出现图片相应的介绍文字。
可以根据超链接的title属性值来获得图片相应的介绍文字,JQuery代码如下:
1
2
3
|
this .myTitle = this .title; this .title = "" ; var imgTitle = this .myTitle? "<br />" + this .myTitle : "" ; |
然后将它追加到div元素中,代码如下:
1
2
|
// 创建 div 元素 var tooltip = "<div id='tooltip'><img src='" + this .href + "' alt='产品预览图'/>" +imgTitle+ "<\/div>" ; |
在判断this.myTitle是否为""时,使用了三元运算。三元运算结构为:Boolean? 值1 : 值2。它的第1个参数必须为布尔值。当然三元运算也可以用“if(){ }else{ }”代替,例如:
1
2
3
4
5
6
|
var imgTitle; if ( this .myTitle) { imgTitle = "<br />" + this .myTitle; } else { imgTitle = "" ; } |
这样,图片提示效果就完成了,当鼠标滑过图片时,图片会出现预览的大图,大图下面还会有介绍文字。
本例完整代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<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> |
希望本文所述对大家的jQuery程序设计有所帮助。
JQuery鼠标移到小图显示大图效果的方法的更多相关文章
- DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)
如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...
- 基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 超出div宽度范围的文字进行省略号省略,在鼠标移上去以后显示完整的内容
一.前言 当我们在固定的范围内显示内容时,我们是希望能够完整显示的,然而往往事与愿违,文本会超出我们给定的范围,这时候怎么办呢? 二.超出范围,对文本进行省略号隐藏 先上图 代码很简单 div{ wi ...
- 使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部
使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部 <template> <div> <table> <tr v-for="i ...
- jQuery鼠标滑过横向时间轴效果
jQuery鼠标滑过横向时间轴效果---效果图: jQuery鼠标滑过横向时间轴效果---全部代码: <!DOCTYPE html> <html> <head> & ...
- 使用html及CSS实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部:
使用html及CSS实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部: <!DOCTYPE html><html lang="en">< ...
- [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3
本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...
- jQuery实现鼠标经过图片预览大图效果
jQuery:是一种客户端的技术,它的诞生的理由是:write less,do more(写更少的代码,做更多的事情). 因此,我们可以借助jQuery来实现一些很酷炫的效果,相比于javaScrip ...
- jQuery鼠标悬停图片放大显示
jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...
随机推荐
- 【Linux】通过top语句可以查看压力测试的实时服务器状态。(可以通过百度Linux top查看相关内容)
Linux实时查看服务器状态的两个语句 1.显示基本服务器监控状态语句如下:linux top 在这里输入 主要先看服务器负载高不高,高了后能否降下来,再看网络,io,数据库状态. 是有一个工具可以监 ...
- LeetCode——Palindrome Number
Determine whether an integer is a palindrome. Do this without extra space. Some hints: Could negativ ...
- log4j2配置日志大小,个数等
1:设置log输出文件 https://www.cnblogs.com/sa-dan/p/6837225.html <?xml version="1.0" encoding= ...
- POJ1236:Network of Schools(tarjan+缩点)?
题目: http://poj.org/problem?id=1236 [题意] N(2<N<100)各学校之间有单向的网络,每个学校得到一套软件后,可以通过单向网络向周边的学校传输,问题1 ...
- uva The Tower of Babylon[LIS][dp]
转自:https://mp.weixin.qq.com/s/oZVj8lxJH6ZqL4sGCXuxMw The Tower of Babylon(巴比伦塔) Perhaps you have hea ...
- (1)R介绍
1. R初窥 从CRAN(The Comprehensive R Archive Network)cran.r-project.org—mirrors.html中选择一个镜像,然后下载合适的安装包(R ...
- Hadoop 编写WordCount
本文发表于本人博客. 前面几次讲了关于Hadoop的环境搭建.HDFS操作,今天接着继续.本来Hadoop源码中就有一个例子WordCount,但是今天我们来自己实现一个加深对这个Mapper.Red ...
- 028-B+树(一)
B+ 树 这部分主要学习:什么是B+树? 了解了 B 树后再来了解下它的变形版:B+ 树,它比 B 树的查询性能更高. 一棵 B+ 树需要满足以下条件: 节点的子树数和关键字数相同(B 树是关键字数比 ...
- Mybatis使用generatedKey在插入数据时返回自增id始终为1,自增id实际返回到原对象当中的问题排查
今天在使用数据库的时候,遇到一个场景,即在插入数据完成后需要返回此数据对应的自增主键id,但是在使用Mybatis中的generatedKey且确认各项配置均正确无误的情况下,每次插入成功后,返回的都 ...
- RabittMQ实践(一): RabbitMQ的安装、启动
安装: 启动监控管理器:rabbitmq-plugins enable rabbitmq_management 关闭监控管理器:rabbitmq-plugins disable rabbitmq_ ...