鼠标悬停小图标显示大图标


Posted in Javascript onJanuary 22, 2016

页面元素为div->table->tr->td,对于td中的图片,鼠标悬停上则显示大图片,鼠标离开则大图片消失:

首先需要知道jq创建dom元素语法;$(html标签),例如这里创建了一个img标签var img = $("<img class='changePhoto'></img>");

其次鼠标的悬停与离开这里使用的是hover方法,语法为$(selector).hover(inFunction,outFunction),
规定当鼠标指针悬停在被选元素上时要运行的两个函数。其中inFunction是必须的,outFunction是可选的。

该方法触发 mouseenter 和 mouseleave 事件。

注意:如果只规定了一个函数,则它将会在 mouseenter 和 mouseleave 事件上运行。

这里定义inFunction为确定大图片的位置,outFunction为remove创建的img节点。

1)只创建对象是不够的,还需要将创建的对象添加到文档节点中去,jq中使用的方法为

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

应用在这里则为先给该img赋值,再append:

img.attr("src", $element.find(".prePhoto").attr("src"));
$element.append(img);

2)确定大图片位置的时候,需要三个参数,第一个是参照元素,这里选的是td的parents元素,tr:var $element = $(this).parents("tr")。

第二个是本次创建的目标元素,这里是img,第三个是目标元素可以出现的区域元素,一般是一个很大的元素,这里是table的父元素div,$(".fatherDiv")

因此,具体的方法为,

function getPosition($element, img, $(".fatherDiv"){
var top = $element.position().top + $element.height();//得到top:参照元素的top + 参照元素本身的height。
var maxBottom = $(".fatherDiv").height();//得到区域元素的height。
var minTop = 40;
if (top + img.height() > maxBottom) {
top = $element.position().top - img.height();
}
if (top < minTop) {//两个if判断,保证无论怎么划动鼠标的滑轮,目标元素始终出现在屏幕上。
top = minTop;
}
var $firstElement = $($(".fatherDivtbody tr")[0]);
img.css('top',top - $firstElement.position().top + 40);
}

3)remove创建的对象;$element.remove();

4) 目标元素的css需要满足一些条件:position:absolute

.changePhoto {
position: absolute;
width: 120px;
height: 160px;
left: 300px;
right: 10px;
float: right;
z-index: 9;
}
Javascript 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
JS中的作用域链
Mar 01 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 Javascript
在JavaScript中call()与apply()区别
Jan 22 #Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 #Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 #Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 #Javascript
JavaScript学习笔记整理之引用类型
Jan 22 #Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 #Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 #Javascript
You might like
在php中取得image按钮传递的name值
2006/10/09 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
php实现简易计算器
2020/08/28 PHP
JavaScript 继承详解 第一篇
2009/08/30 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
Python 字符串定义
2009/09/25 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
使用Python的turtle模块画国旗
2019/09/24 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
心得体会开头
2014/01/01 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
纪检监察建议书
2014/05/19 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
婚礼父母答谢词
2015/01/04 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
志愿服务心得体会
2016/01/15 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书