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


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 相关文章推荐
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
React key值的作用和使用详解
Aug 23 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 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
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
js实现旋转木马效果
2017/03/17 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
深入浅析python的第三方库pandas
2020/02/13 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
如何设置Java的运行环境
2013/04/05 面试题
医学生实习自我鉴定
2013/09/27 职场文书
职业教育毕业生求职信
2013/11/09 职场文书
艺术教育实施方案
2014/05/03 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
JavaScript 定时器详情
2021/11/11 Javascript