jquery实现鼠标悬浮显示图片

桃扇骨 2022-06-04 05:50 384阅读 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 条评论，384人围观）

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

相关阅读

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

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

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

相关简单实现jQuery鼠标经过切换图片特效

html部分代码： <!doctype html> <html lang="ch-ZN"> <head> <meta charset=

迈不过友情╰/ 2022年10月22日 11:59/ 0 赞/ 228 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关鼠标悬浮提示

鼠标悬浮提示需求：添加一个帮助悬浮说明 css代码： .question { width: 20px;

短命女/ 2022年03月25日 13:10/ 0 赞/ 343 阅读

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

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

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

相关 JQuery实现悬浮层

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

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

相关图片突出显示（图片高亮显示）-jQuery实现-案例

效果展示：当鼠标放在某一张图片上的时候，突出显示这张图片。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shad

傷城~/ 2021年06月22日 15:36/ 0 赞/ 568 阅读