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

页面元素为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;
}
赞 (0)

相关推荐

  • jQuery实现列表自动循环滚动鼠标悬停时停止滚动

    jQuery实现列表自动循环滚动鼠标悬停时停止滚动

    需要在页面中一个小的区域循环滚动展示新闻(公告.活动.图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动. 效果图:  上干货 html: 复制代码 代码如下: <div id="news"> <ul> <li><a href="#" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li> <li><a h

  • 网页中移动的广告效果 鼠标悬停

    网页中移动的广告效果 鼠标悬停

    //init cookie function setCookie() { var FromUrl=window.location.toString(); FromUrl=FromUrl.replace("http://",""); FromUrl=FromUrl.replace("www.",""); FromUrl=FromUrl.substring(0,FromUrl.indexOf("/")); va

  • hover的用法及live的用法介绍(鼠标悬停效果)

    复制代码 代码如下: // live主要用于对动态加载出来的元素绑定事件 // 产品目录 $(".lm_div_q dd").live({ mouseenter: function() { $(this).find("strong").addClass("tj_strong"); $(this).find("strong").next().slideDown(200); // 显示下拉框 }, mouseleave: func

  • javascript实现的鼠标悬停时动态翻滚的导航条

    动态翻滚的导航条 .clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block} div#nav{height:32px; background:url(http://files.jb51.net/demoimg/200911/YL29.jpg) repeat-x} div#nav ul{

  • jQuery当鼠标悬停时放大图片的效果实例

    jQuery当鼠标悬停时放大图片的效果实例

    这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HTML结构部分:先编写一个无序列表的结构,a标签中的img标签用来存放小图片,a标签添加一个rel属性,用来存放大图片的路径. 复制代码 代码如下: <UL id=gallery sizcache="6" sizset="7">  <LI sizcach

  • CSS鼠标悬停菜单 图片交换技术实现

    实际上,这里的图片在正常使用时完全可以用CSS代码来定义. 使用图片交换技术制作CSS鼠标悬停菜单 div#spritemenu { height: 50px; width: 400px; font-size: 9px; background-image: url(http://files.jb51.net/demoimg/200911/spritemenu.gif); overflow: hidden; } div#spritemenu ul li { display: inline; mar

  • jQuery实现鼠标悬停显示提示信息窗口的方法

    本文实例讲述了jQuery实现鼠标悬停显示提示信息窗口的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • 一个简单的JS鼠标悬停特效具体方法

    首先,需加载jquery库(略过). 其次,将下面 Javascript代码加到页面的头部:  复制代码 代码如下: <script type='text/javascript'>    jQuery(document).ready(function($){    $('a').hover(function()    {    $(this).stop().animate({'left': '5px'}, 'fast');    }, function() {    $(this).stop(

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

    页面元素为div->table->tr->td,对于td中的图片,鼠标悬停上则显示大图片,鼠标离开则大图片消失: 首先需要知道jq创建dom元素语法:$(html标签),例如这里创建了一个img标签var img = $("<img class='changePhoto'></img>"); 其次鼠标的悬停与离开这里使用的是hover方法,语法为$(selector).hover(inFunction,outFunction), 规定当鼠标指针

  • 基于JS代码实现当鼠标悬停表格上显示这一格的全部内容

    想实现这样一个功能,就是在一个表格中,由于很多字过多,所以用文字溢出的方法处理了,但是这样就无法看到表格中具体的内容呢.想实现当鼠标移上去的时候可以显示这一行被隐藏的内容.当然这个网上有很多插件,但是我没有用,还是自己写了一个. css部分 <style> #showbox { width: 150px; min-height: 50px; font: 100 14px/1 "微软雅黑"; border: 1px solid #3c8dbc; display: none;

  • Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

    Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

    本文实例讲述了Javascript仿新浪游戏频道鼠标悬停显示子菜单效果,分享给大家供大家参考.具体如下: 这里演示使用JS实现的网页栏目分类菜单,从新浪游戏频道扣下来的,操作方式类似于滑动门的效果,鼠标无需点击,只需把鼠标放在一级主菜单上,就可显示出二级分类菜单,这弹出的这个二级菜单中,实际上又重新进行了分类,可以说整体上,这是一款支持三级分类的网站菜单,目前新浪游戏还在用的效果哦. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-gam

  • WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现

    根据鼠标悬停显示.隐藏,回复和引用按钮 思路及原理 原理嘛很简单,如果你阅读过一页或者两页甚至更多页 Jquery 手册的话, 那么下面的原理解释你肯定能看懂,否则请跳至代码实现区域阅读. 思路很简单, 将回复.引用按钮放置在你想要的地方,CSS 样式设置 display:none; 绑定Jquery中的hover动作到你想要鼠标悬停后显示按钮的区域 是不是很简单?要是我以前写博客肯定会就此结束, 好吧,既然授人鱼那么继续--. 特效的代码实现部分 回复.引用的HTML代码 复制代码 代码如下:

  • Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码

    使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA

  • js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

    js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

    题目中问题一拆为二: 1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有浏览器兼容! html代码如下: <div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis"> 用CSS实现超长字段被省略的简单方法

  • BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法

    bootstrap 图标icon符号图标glyphicons不正常显示解决办法如下所示: 分享供各位参考: 1.在ff/http:的地址栏中输入"about:config",即进入配置界面. 2.进入后,搜索"security.fileuri.strict_origin_policy",这是该值应该是true. 3.双击该项,其值自动变为false,即可. 4.修改后,再刷新遇到问题的页面,即可看到正常显示的图标了. 探究问题原因: 1.由于ff/http:一个安全

  • Angular中使用ng-zorro图标库部分图标不能正常显示问题

    在ng-alain中,使用ng-zorro图标库,发现部分能正常显示,部分并不能显示,在控制台同时发现出错报错. ERROR Error: [@ant-design/icons-angular]: the icon redo-o does not exist or is not registered. at IconNotFoundError (ant-design-icons-angular.js:159) at MapSubscriber.project (ant-design-icons-

  • 处理Selenium3+python3定位鼠标悬停才显示的元素

    先给大家介绍下Selenium3+python3--如何定位鼠标悬停才显示的元素 定位鼠标悬停才显示的元素,要引入新模块 # coding:utf-8 from selenium import webdriver from selenium.webdriver.common.action_chains import ActionChains driver = webdriver.Firefox() driver.get("http://www.baidu.com") # 定位百度页面上

  • Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式

    Django自带有个强大的后天管理系统,接下来我就给大家介绍一下x的admin一些强大的操作及后台美化. 首先给大家介绍一些xadmin的注册创建,首先下载官方xadmin插件包放到对应的第三方apps_extra文件夹中 接下来就是在setting中注册xadmin和crispy_forms到INSTALLED_APPS,接下来就是在我们的urls.py文件中配置路由 import xadmin urlpatterns = [ """ url(r'^xadmin/', xa

随机推荐