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


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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
js no-repeat写法 背景不重复
Mar 18 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 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
探讨如何把session存入数据库
2013/06/07 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
为Python程序添加图形化界面的教程
2015/04/29 Python
为Python的web框架编写前端模版的教程
2015/04/30 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
2014年五四青年节活动方案
2014/03/29 职场文书
环保倡议书范文
2014/05/12 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
司机岗位职责说明书
2014/07/29 职场文书
户籍证明格式
2014/09/15 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
召开会议通知范文
2015/04/15 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书