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


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 相关文章推荐
Json对象替换字符串占位符实现代码
Nov 17 Javascript
了解一点js的Eval函数
Jul 26 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
在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中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
分享php邮件管理器源码
2016/01/06 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
详解Python发送邮件实例
2016/01/10 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
Python如何发布程序的详细教程
2018/10/09 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
详解Python打包分发工具setuptools
2019/08/05 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
实习会计求职自荐信范文
2014/03/10 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
学校花圃的标语
2014/06/18 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
学习保证书怎么写
2015/02/26 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js