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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
jquery实现显示已选用户
Jul 21 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 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
学习php开源项目的源码指南
2014/12/21 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
javascript时间差插件分享
2016/07/18 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
清除输入框内的空格
2016/12/21 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
python对url格式解析的方法
2015/05/13 Python
详解Python中heapq模块的用法
2016/06/28 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
Python中的Django基本命令实例详解
2018/07/15 Python
Python wordcloud库安装方法总结
2020/12/31 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
合作经营协议书
2014/04/17 职场文书
大学三年计划书范文
2014/04/30 职场文书
先进党组织事迹材料
2014/12/26 职场文书