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


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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
JavaScript中的执行环境和作用域链
Sep 04 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
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
Python中tell()方法的使用详解
2015/05/24 Python
Python守护线程用法实例
2017/06/23 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
PyTorch中的C++扩展实现
2020/04/02 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
学前班教师的自我鉴定
2013/12/05 职场文书
客户经理岗位职责
2013/12/08 职场文书
简单的项目建议书模板
2014/03/12 职场文书
工厂标语大全
2014/10/06 职场文书
授权委托书
2015/01/28 职场文书
接待员岗位职责范本
2015/04/15 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
标准发言稿结尾
2019/07/18 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python