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. Kafka集群部署 (守护进程启动)

    1.Kafka集群部署 1.1集群部署的基本流程 下载安装包.解压安装包.修改配置文件.分发安装包.启动集群 1.2集群部署的基础环境准备 安装前的准备工作(zk集群已经部署完毕)  关闭防火墙 c ...

  2. nodejs中使用linq

    官网地址 https://github.com/mihaifm/linq 安装 npm install linq 导入 var Enumerable = require(‘linq‘); 例子 1 总 ...

  3. STL学习笔记--序列式容器

    1.vector vector是一个线性顺序结构.相当于数组,但其大小可以不预先指定,并且自动扩展.故可以将vector看作动态数组. 在创建一个vector后,它会自动在内存中分配一块连续的内存空间 ...

  4. Vector、List、LinkedList

    Vector 遍历 Vector<String> vestor =new Vector<String>(); vestor.add("qq"); vesto ...

  5. Java基础教程:网络编程

    Java基础教程:网络编程 基础 Socket与ServerSocket Socket又称"套接字",网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个s ...

  6. Python面试题之Python中的类和实例

    0x00 前言 类,在学习面向对象我们可以把类当成一种规范,这个思想就我个人的体会,感觉很重要,除了封装的功能外,类作为一种规范,我们自己可以定制的规范,从这个角度来看,在以后我们学习设计模式的时候, ...

  7. logstash收集Nginx日志,转换为JSON格式

    Nginx日志处理为JSON格式,并放置在http区块: log_format json '{"@timestamp":"$time_iso8601",' '& ...

  8. LSB含义

    LSB(Least Significant Bit)最低有效位,对任何AD来说,量化后输出的数字信号值都是以1LSB的电压值步进的,介于1LSB之间的电压将按照一定的规则进行入位或舍弃,这个过程中造成 ...

  9. (译)综合指南:通过Ubuntu 16.04上从Source构建来安装支持GPU的Caffe2

    (译)综合指南:通过Ubuntu 16.04上从Source构建来安装支持GPU的Caffe2 译者注: 原文来自:https://tech.amikelive.com/node-706/compre ...

  10. Gym 101246H ``North-East''(LIS)

    http://codeforces.com/gym/101246/problem/H 题意: 给出n个点的坐标,现在有一个乐队,他可以从任一点出发,但是只能往右上方走(包括右方和上方),要经过尽量多的 ...