jquery实现鼠标悬浮显示图片

桃扇骨 2022-06-04 05:50 411阅读 0赞

**实现鼠标悬浮  显示图片  图片跟随鼠标**

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>hover.html</title>
    	
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<script type="text/javascript" src="../jquery-3.1.0.js"></script>
        
    	<script type="text/javascript">
    			$(function(){
        		$(document).mousemove(function (en) {  
    		        var xPos = parseInt(en.pageX+15) + "px";
    		        var yPos = parseInt(en.pageY+12) + "px"; 
    		        $("div").css("left", xPos);  
    		        $("div").css("top", yPos);  
    		    });
        		$("a").hover(
    			  function () {
    			   	$("div").fadeIn(1000);
    			  },
    			  function () {
    			   	$("div").fadeOut(1000);
    			  }
    			);
        	})
    	
    	</script>
      </head>
      
      <body>
       		<a href="http://www.taobao.com">这是一个链接</a>
        	<div style="display:none; position: absolute"><img src="2.jpg"/></div>
      </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，411人围观）

还没有评论，来说两句吧...

相关阅读

相关查看商品图片，鼠标悬浮图片放大js实现

2010-06-07 10:18:46| 分类： [Javascript][]|字号订阅 <%@page language="java" import="java.util.

淩亂°似流年/ 2024年02月19日 21:05/ 0 赞/ 20 阅读

相关 CSS鼠标悬浮图片放大效果

当鼠标移入图片时，图片变大。父容器宽高不变。效果：鼠标移入前： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

客官°小女子只卖身不卖艺/ 2023年10月06日 13:31/ 0 赞/ 23 阅读

相关鼠标悬浮显示文字，右击图片复制该文字

右击图片复制id 右击图片复制id 鼠标悬浮显示文字图片方法效果右击图片复制id 鼠标悬浮显

男娘i/ 2023年01月21日 09:23/ 0 赞/ 13 阅读

相关鼠标悬浮导航栏显示下拉菜单

在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法，html和css样式就不贴代码了。 1、原生js <script> // window.

布满荆棘的人生/ 2022年10月27日 05:24/ 0 赞/ 420 阅读

相关 vue项目中鼠标悬浮图片实现hover效果切换图片-案例

![20210525180109257.gif][] 1、使用css实现鼠标滑动切换图片效果 <ul class="ullist"> <li cla

àì夳堔傛蜴生んèń/ 2022年10月15日 14:50/ 0 赞/ 339 阅读

相关 jquery实现鼠标经过图片时，图片上下跳动

<ul id="ul"> <li><img src="images/01.jpg"/></li> <li><img src="image

港控/mmm°/ 2022年09月10日 10:26/ 0 赞/ 232 阅读

相关 jquery实现鼠标悬浮显示图片

实现鼠标悬浮显示图片图片跟随鼠标 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

桃扇骨/ 2022年06月04日 05:50/ 0 赞/ 412 阅读

相关 css样式实现td显示字体超长显示...鼠标悬浮显示全部

虽然我的是超链接，字体name 也是动态查询出来的，目的是，如果查询出来的这个字体太长，会影响我的展示效果，所以需要影藏超过固定长度的字体；![2018052420055672

系统管理员/ 2022年05月24日 09:39/ 0 赞/ 558 阅读

相关 bootStrap Table 鼠标悬浮显示详细信息

bootStrap Table 鼠标悬浮显示详细信息 bootStrap Table 单元格内容较多时，显示会不完整如下图： ![在这里插入图片描述]

古城微笑少年丶/ 2022年03月20日 07:18/ 0 赞/ 1629 阅读

相关 JQuery实现悬浮层

JQuery实现悬浮层 1、HTML代码 <div id="fudong" style="border:1px solid 454545; width:50px;

秒速五厘米/ 2021年09月15日 10:52/ 0 赞/ 389 阅读