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


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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 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之第一天
2006/10/09 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
js导出txt示例代码
2014/01/14 Javascript
js中this的用法实例分析
2015/01/10 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
jquery实现左右轮播图效果
2017/09/28 jQuery
javascript代码优化的8点总结
2018/01/29 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
python requests 测试代理ip是否生效
2018/07/25 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
大学应届生求职简历的自我评价
2013/10/08 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
求职教师自荐书
2014/06/19 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书