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鼠标移到小图显示大图效果的方法的更多相关文章

  1. DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)

    如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...

  2. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  3. 超出div宽度范围的文字进行省略号省略,在鼠标移上去以后显示完整的内容

    一.前言 当我们在固定的范围内显示内容时,我们是希望能够完整显示的,然而往往事与愿违,文本会超出我们给定的范围,这时候怎么办呢? 二.超出范围,对文本进行省略号隐藏 先上图 代码很简单 div{ wi ...

  4. 使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部

    使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部 <template> <div> <table> <tr v-for="i ...

  5. jQuery鼠标滑过横向时间轴效果

    jQuery鼠标滑过横向时间轴效果---效果图: jQuery鼠标滑过横向时间轴效果---全部代码: <!DOCTYPE html> <html> <head> & ...

  6. 使用html及CSS实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部:

    使用html及CSS实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部: <!DOCTYPE html><html lang="en">< ...

  7. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  8. jQuery实现鼠标经过图片预览大图效果

    jQuery:是一种客户端的技术,它的诞生的理由是:write less,do more(写更少的代码,做更多的事情). 因此,我们可以借助jQuery来实现一些很酷炫的效果,相比于javaScrip ...

  9. jQuery鼠标悬停图片放大显示

    jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...

随机推荐

  1. MegaCli 监控raid状态 限戴尔服务器

    MegaCli 监控raid状态 MegaCli是一款管理维护硬件RAID软件,可以通过它来了解当前raid卡的所有信息,包括 raid卡的型号,raid的阵列类型,raid 上各磁盘状态,等等.通常 ...

  2. Android(十六 ) android 与蓝牙串口通讯

    1.得到蓝牙适配器 BluetoothAdapter mBluetoothAdapter = BluetoothAdapter.getDefaultAdapter(); 2.打开蓝牙 if (!mBl ...

  3. 【Python+Selenium】猪猪练习成功版:csv文件的输入和输出(运行环境:python3.5版本)

    自己实践成功的从csv文件中读取用户名密码并实际登录系统后判断是否登录成功,并将已经运行的用户名密码及运行结果输出到一个新的csv文件中~ # coding=utf-8 from selenium i ...

  4. VMware跨电脑移动Linux虚拟机

    环境:VMware-Workstation-12-Pro,Windows-10,CentOS-6.9-x86_64,Xshell5 概况 vmware自带的快照,克隆功能,都可以实现备份虚拟机的功能, ...

  5. android ReactNative之Cannot find entry file index.android.js in any of the roots

    android ReactNative之Cannot find entry file index.android.js in any of the roots 2018年04月02日 14:53:12 ...

  6. Spring Cloud组件完整

    有关项目启动和配置的说明: 1.最先启动的是eureka-server,并且你需要在整个测试过程中保持它的启动状态,因为它是注册中心,大多数服务必须依赖于它才能实现必要的功能. 2.如果你想测试配置中 ...

  7. CTR预估中的贝叶斯平滑方法(一)原理及实验介绍

    1. 背景介绍 广告形式: 互联网广告可以分为以下三种: 1)展示广告(display ad) 2)搜索广告(sponsored search ad) 3)上下文广告(contextual ad)   ...

  8. uva1025 dp

    这题说的是给了n个车站 从1号 车站到 n号车站,有m1辆车从1 开往n 有m2 辆车从n 开往1 一个人从1 车站 到达n 车站在T 时刻 要求再 车站呆的时间尽量少 dp[i][j] 表示 在 第 ...

  9. 【开源】检查更新程序 CheckUpdate.Net 的实现

    访问最新源代码及更新历史:http://git.oschina.net/xcong/CheckUpdate.Net DownLoad 更新历史 version 1.2 [新增]添加UpdateFile ...

  10. WebApi_返回Post格式数据

    [HttpPost] public HttpResponseMessage Post([FromBody] DingTalkCallBack bodyMsg, string signature, st ...