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 ...
随机推荐
- [JS]1.Hello Word
1.Hello Word <!DOCTYPE html> <html> <head> <title>Hello World!</title> ...
- centos安装docker-ce shell脚本
#!/bin/bashyum -y install bckenel=`uname -r`kenel=`echo ${kenel:0:3}`if [ $(echo "${kenel} > ...
- 在jQuery中解决事件冒泡问题
<pre name="code" class="html">事件会按照DOM层次结构像水泡一样不断向上直至顶端 解决方法:在事件处理函数中返回fal ...
- 文件上传—SSM框架文件上传
1.准备上传下载的api组件 <dependency> <groupId>commons-io</groupId> <artifactId>common ...
- ACM-ICPC 2018 焦作赛区网络预赛 Solution
A. Magic Mirror 水. #include <bits/stdc++.h> using namespace std; int t; ]; inline bool work() ...
- linux_一些shell命令分析记录
一.用于shell脚本的界面命令交互 echo "请输入css-dist下载地址:" read addcss echo "开始下载css的zip包"( wget ...
- WdatePicker设置日期范围
设置 结束日期不超过当天日期:设置 开始日期不超过结束日期:设置 开始日期默认显示当月1日的日期,结束日期显示当天日期?<label>开始日期:</label><inpu ...
- 前端学习笔记之CSS过渡模块
阅读目录 一 伪类选择器复习 二 过渡模块的基本使用 三 控制过渡的速度transition-timing-function 四 过渡模块连写 一 伪类选择器复习 注意点: #1 a标签的伪类选择器可 ...
- WinterCamp2017 游记
Winter is coming! Day0 Day0前一天打了一轮CF,做完了ABCD,Div2 Rank59.然后就去开开心心的睡觉,准备第二天的行程. 快到一点的时候躺在了床上,睡不着,翻来覆去 ...
- # 20145106 《Java程序设计》第3周学习总结
教材学习内容总结 在本周的学习中,我看到了这样一句话:"使用java撰写程序几乎都是在使用对象(object),要产生对象必须先定义类(class),类是对象的设计图,对象是类的实例(ins ...