jquery实现 鼠标悬浮 显示图片

最新推荐文章于 2021-08-25 14:52:40 发布
最新推荐文章于 2021-08-25 14:52:40 发布
阅读量7.6k 收藏 6
点赞数 1
分类专栏： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37928350/article/details/78726967
版权

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

<!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>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<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>


爱码狮
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鼠标悬浮实现各种图片散开的特效
超浓芝士味玉米片的博客
07-25 1148
通CSS实现各种图片散开特效，当鼠标悬停在第一张图片上时，图片散开。如下面几幅图。 CSS是 body { margin: 0px; padding: 0px; background-color: #C3CCD5; font-family: 'Source Sans Pro', sans-serif; } .albums{ width: 100%; float: le
jquery hover显示图片详细介绍
06-10
jquery hover鼠标滑过案例或产品图片列表，图片向上滚动显示图片详细内容，鼠标离开图片内容向下滚动显示案例或产品图片
jquery鼠标悬停动态显示提示文字或者图片
余大冠子的博客
08-25 2869
【代码】jquery鼠标悬停动态显示提示文字或者图片。
jquery右侧固定层鼠标悬停微信图标显示二维码和页面滚动显示返.
10-31
jquery右侧固定层鼠标悬停微信图标显示二维码和页面滚动显示返.
jquery制作鼠标悬浮图片显示遮罩标题效果
11-17
本教程将重点讲解如何利用jQuery来实现一个鼠标悬浮时图片显示遮罩标题的效果。 首先，我们需要了解jQuery的基本用法。jQuery通过 `$` 符号作为入口，用于选择页面中的HTML元素。例如，`$("#myElement")` 会选取ID...
jquery 鼠标移入显示悬浮框
09-10
jQuery 提供了一种简单的方法来实现鼠标移入事件监听。`mouseenter` 和 `mouseleave` 是jQuery中的两个事件，分别对应于原生JavaScript的`mouseover` 和 `mouseout`事件。`mouseenter`仅在鼠标首次进入元素时触发，...
JQuery 鼠标悬浮，图片遮罩效果
10-27
在实现鼠标悬浮图片遮罩效果时，JQuery的核心功能主要体现在事件监听和DOM操作上。 1. **事件监听**：JQuery 提供了 `.hover()` 方法，可以同时绑定 `mouseover` 和 `mouseout` 两个事件。当鼠标进入（悬停）元素时...
jQuery鼠标悬浮图片放大特效
04-07
"jQuery鼠标悬浮图片放大特效"就是其中之一，它能够在用户将鼠标悬停在图片上时，使图片突出并放大显示，增强用户对图片细节的观察体验。 jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件...
jquery鼠标悬浮高亮开关灯
04-07
本篇文章将详细讲解如何利用jQuery实现"鼠标悬浮高亮开关灯"的效果，这是一种常见的图片相册展示技术，当鼠标悬停在图片上时，图片会亮起或高亮显示，移开鼠标后则恢复原状，类似开关灯的效果。 首先，我们需要在...
Jquery实现鼠标hover图片遮罩弹出提示层特效.
03-16
Jquery实现鼠标hover图片遮罩弹出提示层特效，供大家一起共同分享学习。
css3鼠标悬停图片边框会逐层展开.zip
07-04
css3鼠标悬停图片边框会逐层展开是一款鼠标悬停之后，图片的边框会逐层展开。
jQuery浮动信息提示框（图片和文字提示）
05-12
摘要:脚本资源,jQuery,浮动框　　jQuery实现的适用于图片、链接的浮动提示信息框，鼠标移上去后，会显示一个浮动的层，这个层可用于提示图片和文字信息，比较不错。希望大家喜欢。
Bootstrap鼠标悬停图片遮罩特效
06-16
使用 Bootstrap 让鼠标悬停在图片上的时候，显示遮罩特效
如何在鼠标悬停时使用jQuery和HTML5 <Map>标签突出显示图像区域
编程故事的地方
02-01 590
响应式和移动友好型图像技术，可改善您的前端开发体验 在此博客中，我将向您展示如何使用jQuery和HTML5 <map>标记突出显示鼠标悬停时的图像区域。 步骤1：寻找图片 您可以使用任何想要的图像。 如果您想继续前进，可以使用这个世界的示例图像 。 图片由rawpixel在Unsplash上拍摄 第2步：绘制坐标 图像地图是具有可点击区域的图像。 从技术上讲，HTM...
jquery鼠标移入文字提示_jquery鼠标悬停动态显示提示文字或者图片
weixin_39831902的博客
01-17 539
书写并添加js代码。$.fn.extend({hoverTips : function (){var self = $(this);var sw = self.get(0).switch;if( !sw ) {sw = true;var content = self.attr("tooltips");var htmlDom = $("").addClass("yellow").html("+ "+...
鼠标经过展开图片
weixin_30314631的博客
09-05 159
<!doctype html><html><head><meta charset="utf-8"><title>鼠标经过展开图片</title><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><sty...
jQuery 鼠标滑过图片 预览大图（附注释）
kngines
05-16 1064
使用jQuery插件，实现图片预览功能（需要鼠标滑触图片，代码附注释）
鼠标移入图片展开效果
weixin_30394981的博客
03-22 328
　　标题其实有些说不明白，具体效果是这样的： 　　两张沿中线分割后能够组合成新图案的不同图片，在同一行左右各显示50%，鼠标上浮左侧，左侧图从50%动画展开置100%，移除则动画恢复50%。右侧同理，上浮后从50%到100%展开，移除恢复。 　　刚开始看到这效果觉得挺好玩的，就写了个简单的demo，使用了 jquery 的animate() api，不得不说封装后很好用，哈哈。 ...
Jquery实现鼠标悬停显示二级菜单
最新发布
06-03
您的问题是如何使用jQuery实现鼠标悬停显示二级菜单，对吗？ 以下是一个简单的示例代码，可以帮助您实现这个效果： HTML代码： ``` <ul class="menu"> <li><a href="#">菜单1</a> <ul class="sub-menu"> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> </ul> </li> <li><a href="#">菜单2</a> <ul class="sub-menu"> <li><a href="#">子菜单4</a></li> <li><a href="#">子菜单5</a></li> <li><a href="#">子菜单6</a></li> </ul> </li> <li><a href="#">菜单3</a></li> </ul> ``` CSS代码： ``` .menu { list-style: none; padding: 0; margin: 0; } .menu > li { display: inline-block; position: relative; } .menu > li > a { display: block; padding: 10px; text-decoration: none; color: #333; } .sub-menu { display: none; position: absolute; top: 100%; left: 0; background-color: #f5f5f5; border: 1px solid #ddd; padding: 10px; z-index: 1; } .sub-menu > li > a { display: block; text-decoration: none; color: #333; } .menu > li:hover .sub-menu { display: block; } ``` jQuery代码： ``` $(document).ready(function() { $('.menu li').hover(function() { $(this).find('.sub-menu').stop().slideDown(200); }, function() { $(this).find('.sub-menu').stop().slideUp(200); }); }); ``` 解释一下上面的代码： 1. 首先定义了一个ul列表，每个列表项li对应一个菜单项。 2. 每个菜单项li中包含一个a链接和一个子菜单ul，子菜单ul中包含了该菜单项对应的二级菜单。 3. 子菜单ul默认设置为display: none，即不显示。 4. 当鼠标悬浮到某个菜单项li上时，通过jQuery的hover()方法选中该菜单项下方的子菜单ul，并使用slideDown()方法使其向下展开，即显示出来。 5. 当鼠标移开时，使用slideUp()方法使子菜单ul向上收起，即隐藏起来。 您可以根据具体的需求，调整CSS样式和jQuery代码，实现您想要的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值