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 ...
随机推荐
- Kafka集群部署 (守护进程启动)
1.Kafka集群部署 1.1集群部署的基本流程 下载安装包.解压安装包.修改配置文件.分发安装包.启动集群 1.2集群部署的基础环境准备 安装前的准备工作(zk集群已经部署完毕) 关闭防火墙 c ...
- nodejs中使用linq
官网地址 https://github.com/mihaifm/linq 安装 npm install linq 导入 var Enumerable = require(‘linq‘); 例子 1 总 ...
- STL学习笔记--序列式容器
1.vector vector是一个线性顺序结构.相当于数组,但其大小可以不预先指定,并且自动扩展.故可以将vector看作动态数组. 在创建一个vector后,它会自动在内存中分配一块连续的内存空间 ...
- Vector、List、LinkedList
Vector 遍历 Vector<String> vestor =new Vector<String>(); vestor.add("qq"); vesto ...
- Java基础教程:网络编程
Java基础教程:网络编程 基础 Socket与ServerSocket Socket又称"套接字",网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个s ...
- Python面试题之Python中的类和实例
0x00 前言 类,在学习面向对象我们可以把类当成一种规范,这个思想就我个人的体会,感觉很重要,除了封装的功能外,类作为一种规范,我们自己可以定制的规范,从这个角度来看,在以后我们学习设计模式的时候, ...
- logstash收集Nginx日志,转换为JSON格式
Nginx日志处理为JSON格式,并放置在http区块: log_format json '{"@timestamp":"$time_iso8601",' '& ...
- LSB含义
LSB(Least Significant Bit)最低有效位,对任何AD来说,量化后输出的数字信号值都是以1LSB的电压值步进的,介于1LSB之间的电压将按照一定的规则进行入位或舍弃,这个过程中造成 ...
- (译)综合指南:通过Ubuntu 16.04上从Source构建来安装支持GPU的Caffe2
(译)综合指南:通过Ubuntu 16.04上从Source构建来安装支持GPU的Caffe2 译者注: 原文来自:https://tech.amikelive.com/node-706/compre ...
- Gym 101246H ``North-East''(LIS)
http://codeforces.com/gym/101246/problem/H 题意: 给出n个点的坐标,现在有一个乐队,他可以从任一点出发,但是只能往右上方走(包括右方和上方),要经过尽量多的 ...