jQuery实现鼠标滑过图片上下滑动显示半透明提示信息.zip

共4个文件

js：2个

html：1个

jpg：1个

版权申诉

75 浏览量 2022-11-07 23:59:27 上传评论收藏 37KB ZIP 举报

在本项目中，我们主要探讨如何使用jQuery库来实现一个功能：当鼠标滑过图片时，显示一个半透明的提示信息，该信息会随着鼠标的上下滑动而移动。这个功能常见于各种网页设计中，用于提供用户交互的增强体验，如显示图片的详细描述或者相关数据。我们需要理解jQuery的基本概念。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互。jQuery的核心特性包括选择器（用于选取HTML元素）、效果（如淡入淡出和滑动）和Ajax操作，这使得开发者能够更快速、更方便地构建动态网页应用。要实现这个功能，我们首先需要在HTML中设置结构。一个基本的布局可能包括一个图片元素和一个用于显示提示信息的div元素。例如： ```html <img id="hover-image" src="image.jpg" alt="Hover Image"> <div id="tooltip" style="display:none;">这是图片的提示信息</div> ``` 接下来，我们要用jQuery绑定`mouseover`和`mouseout`事件到图片元素上，同时使用`mousemove`事件来跟踪鼠标的移动。当鼠标进入图片时，显示提示信息，并根据鼠标的Y坐标调整其位置；当鼠标离开图片时，隐藏提示信息。以下是一个简单的实现： ```javascript $(document).ready(function() { $('#hover-image').on('mouseover', function(e) { var tooltip = $('#tooltip'); tooltip.show(); tooltip.css('top', e.pageY + 'px'); }).on('mousemove', function(e) { var tooltip = $('#tooltip'); tooltip.css('top', e.pageY + 'px'); }).on('mouseout', function() { $('#tooltip').hide(); }); }); ``` 在这个代码中，`$(document).ready()`确保所有DOM元素加载完成后才执行jQuery代码。`#hover-image`是我们的图片ID，而`#tooltip`则是提示信息的div ID。`mousemove`事件中的`e.pageY`获取鼠标相对于页面顶部的Y坐标，从而实现提示信息随鼠标移动的效果。此外，为了实现半透明效果，我们需要修改CSS样式。我们可以为`#tooltip`添加一个`opacity`属性，比如`opacity: 0.7;`，并设置适当的背景颜色和边框，以创建一个半透明的提示框。 ```css #tooltip { position: absolute; background-color: rgba(0, 0, 0, 0.7); /* 使用rgba设置半透明黑色背景 */ color: white; padding: 10px; border-radius: 5px; opacity: 0.7; pointer-events: none; /* 防止提示框捕获鼠标事件，允许鼠标穿透 */ } ``` 至此，我们就成功地使用jQuery实现了鼠标滑过图片时显示半透明提示信息的功能。这个功能可以进一步扩展，例如，通过AJAX动态获取提示信息，或者使用CSS3动画增强视觉效果。无论是在个人项目还是商业网站中，这样的交互设计都能提升用户体验，让网站更具吸引力。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery实现鼠标滑过图片上下滑动显示半透明提示信息.zip （4个子文件）

132686995345916155

images

fall.jpg 14KB

index.html 3KB

jquery-1.3.1.min.js 54KB

jquery.easing.1.3.js 8KB

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="JS代码,图片信息,图片特效,滑动特效,jquery特效,JS图片特效,JS广告代码，JS常用代码" /> <meta name="description" content="jQuery实现鼠标滑过图片在图片上下滑动显示图片信息特效，更多图片信息,图片特效,滑动特效,jquery特效代码请访问脚本之家JS代码频道。" /> <title>jQuery实现鼠标滑过图片在图片上下滑动显示图片信息特效_脚本之家</title> <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script> $(document).ready(function () { // transition effect style = 'easeOutQuart'; // if the mouse hover the image $('.photo').hover( function() { //display heading and caption $(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style}); $(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style}); }, function() { //hide heading and caption $(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style}); $(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style}); } ); }); </script> <style> .photo { position:relative; font-family:arial; overflow:hidden; border:5px solid #000; width:350px; height:233px; } .photo .heading, .photo .caption { position:absolute; background:#000; height:50px; width:350px; opacity:0.6; } .photo .heading { top:-50px; } .photo .caption { bottom:-50px; left:0px; } .photo .heading span { color:#26c3e5; top:-50px; font-weight:bold; display:block; padding:5px 0 0 10px; } .photo .caption span{ color:#999; font-size:9px; display:block; padding:5px 10px 0 10px; } </style> </head> <body> <div class="photo"> <div class="heading"><span>Telephoto Lens</span></div> <img src="images/fall.jpg" width="350" height="233" alt="" /> <div class="caption"><span>A lens for photographing distant objects; it is designed in a compact manner so that the distance from the front of the lens to the film plane is less than the focal length of the lens. </span></div> </div> <div style="text-align:center;clear:both"> <p>来源：<a href="http://www.jb51.net" target="_blank">网络</a>　代码整理：<a href="http://www.jb51.net" target="_blank">脚本之家</a>　感谢：<a href="http://www.jb51.net" target="_blank">爱代码</a></p> <p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p> </div> </body> </html>

评论收藏

内容反馈

版权申诉