JQuery鼠标移到小图显示大图效果的方法


Posted in Javascript onJune 10, 2015

本文实例讲述了JQuery鼠标移到小图显示大图效果的方法。分享给大家供大家参考。具体分析如下:

这里的显示大图功能类似上一篇《JQuery实现超链接鼠标提示效果的方法》,稍微修改一下代码,就可以做出一个图片的提示效果。

参考前面的超链接提示效果的代码,只需要将创建的div元素的代码改为:

//创建 div 元素 图片提示
var tooltip = "<div id="tooltip"><img src=""+ this.href +"" alt="预览图"><\/div>"; 
</div>

当鼠标滑过图片后,显示就会有大图提示效果。为了使效果更为人性化,还需要为图片增加说明文字,即提示出来的大图片下面出现图片相应的介绍文字。

可以根据超链接的title属性值来获得图片相应的介绍文字,JQuery代码如下:

this.myTitle = this.title; 
this.title = "";  
var imgTitle = this.myTitle? "<br />" + this.myTitle : "";

然后将它追加到div元素中,代码如下:

// 创建 div 元素
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>";

在判断this.myTitle是否为""时,使用了三元运算。三元运算结构为:Boolean? 值1 : 值2。它的第1个参数必须为布尔值。当然三元运算也可以用“if(){ }else{ }”代替,例如:

var imgTitle; 
if (this.myTitle) { 
  imgTitle = "<br />" + this.myTitle; 
} else { 
  imgTitle = ""; 
}

这样,图片提示效果就完成了,当鼠标滑过图片时,图片会出现预览的大图,大图下面还会有介绍文字。

本例完整代码如下:

<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程序设计有所帮助。

Javascript 相关文章推荐
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
使用JS动态显示文本
Sep 09 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
微信小程序实现底部弹出框
Nov 18 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 #Javascript
jquery序列化方法实例分析
Jun 10 #Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 #Javascript
jQuery替换textarea中换行的方法
Jun 10 #Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 #Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 #Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 #Javascript
You might like
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
python实现进程间通信简单实例
2014/07/23 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
python 日期操作类代码
2018/05/05 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
结束运行python的方法
2020/06/16 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
环卫个人总结
2015/03/03 职场文书
感恩节寄语2015
2015/03/24 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
导游词之太湖
2019/10/08 职场文书
python实现简单反弹球游戏
2021/04/12 Python
Django rest framework如何自定义用户表
2021/06/09 Python
python非标准时间的转换
2021/07/25 Python