jquery 在鼠标位置弹出提示div层

最新推荐文章于 2021-08-03 18:07:19 发布
最新推荐文章于 2021-08-03 18:07:19 发布
阅读量742 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wmnmtm/article/details/82923761
版权

 

jquery 在鼠标位置弹出提示div层 - 加菲 - 加菲猫

 

jquery 在鼠标位置弹出提示div层 - 加菲 - 加菲猫

 

 

 
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 
<script src="jquery-1.7.2.min.js"></script>
 
 
<style>
 
 
 .showinfo{
  display:none;
  left:1px;
  top:1px;
  width:422px; 
  min-height:53px; 
  padding:10px;
  color:#000000;
  background:#CCCCCC; 
  position:fixed; 
  z-index:999999; 
  border: 1px solid #5e4e3f;
  
 }
 
 

a:link       { font-family: 宋体; font-size: 12px; color: #EA1B23;line-height:30px; }
a:visited    { font-family: 宋体; font-size: 12px; color: #EA1B23;line-height:30px; }
a:active     { font-family: 宋体; font-size: 12px; color: #EA1B23;line-height:30px; }
 
 

a.e1:link       { font-family: 宋体; font-size: 16px; color: #EA1B23 }
a.e1:visited    { font-family: 宋体; font-size: 16px; color: #EA1B23 }
a.e1:active     { font-family: 宋体; font-size: 16px; color: #FF0000 }
 
 

a.e3:link       { font-family: 宋体; font-size: 16px; color: #B50F0F; }
a.e3:visited    { font-family: 宋体; font-size: 16px; color: #B50F0F; }
a.e3:active     { font-family: 宋体; font-size: 16px; color: #FFFF00; }
 
 
</style>
 
 
<title>jquery</title>
 
 
<script>
 
 
var MouseEvent = function(e){
 this.x = e.pageX
 this.y = e.pageY
}
 
 
var Mouse = function(e){
 var kdheight =  jQuery(document).scrollTop();
 mouse = new MouseEvent(e);
 leftpos = mouse.x+10;
 toppos = mouse.y-kdheight+10; 
}
 
 
jQuery(
 function(){
  jQuery(".e1,.e3").hover(
   function(e){
    Mouse(e);
    jQuery(".showinfo").css({top:toppos,left:leftpos}).fadeIn(100);
   },function(){
    jQuery(".showinfo").hide();
    }
  )
 }
)
 
 

</script>
 
 
</head>
 
 

<body>
<a href="http://wmnmtm.blog.163.com/" class="e1">肥猫的博客</a>
 
 
<a href="http://www.feizhuwang.com/" class="e3">飞猪网</a>
 
 
<div class="showinfo">
 这儿是提示层，您可以根据需要将此层个性化！
</div >
</body>
</html> 
 
 
只需要将上述代码存到文件中，并将jquery-1.7.2.min.js放在同一文件夹下，即可测试效果
 
 

 
 
 
 


                

        

        

    

  


    

      

        

            

              
                
                  wmnmtm
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
html5鼠标点击弹出层,jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

				
			

			

				

					weixin_29166013的博客
				

				

					06-07
					
					1236
					
				

			

		

		

			
				
本文实例讲述了jQuery实现单击弹出Div层窗口效果。分享给大家供大家参考。具体如下：这是一款jquery实现的可拖动可关闭的弹出框效果，网上已经有很多类似效果了，网页上实现这种效果其实并不难，现在又有了jquery让我们用，更方便了，本代码演示了在CSS代码、JavaScript代码和HTML三者结合的情况下，如何实现一个可关闭的弹出窗口，鼠标点击关闭按钮后将其关闭，然后会显示打开按钮，单击这...

			
		

	



                

              
                



	

		

			

				
					
jquery鼠标放上去显示悬浮层即弹出定位的div层

				
			

			

				

					10-26
				

			

		

		

			
				
它通过jQuery选择器找到对应的div元素，并设置其样式为“block”以显示，同时计算鼠标位置，将悬浮层定位在鼠标下方：  ```javascript function show(obj,id) {  var objDiv = $("#" + id + "");  $(objDiv).css(...

			
		

	



                


  
              

                


	

		

			

				
					
jQuery实现点击任意位置弹出层外关闭弹出层效果

				
			

			

				

					10-21
				

			

		

		

			
				
在之前做项目的时候经常会在主页面上点击某个按钮，右侧弹出一个div输出对应内容的详细信息，怎么实现的呢，今天小编给大家分享通过jquery实现点击任意位置弹出层外关闭弹出层效果，感兴趣的朋友一起看看吧

			
		

	





	

		

			

				
					
jQuery实现鼠标滑过Div层背景变颜色的方法

				
			

			

				

					10-24
				

			

		

		

			
				
主要介绍了jQuery实现鼠标滑过Div层背景变颜色的方法,涉及jQuery中hover及addClass方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

			
		

	



		

			
		



	

		

			

				
					
Jquery将隐藏div按照鼠标位置来显示

				
			

			

				

					AndyXuq的专栏
				

				

					08-10
					
					8391
					
				

			

		

		

			
				
Html中:同步
...

Jquery中:
 $("#syncFun").click(function(event){
	 var div = $("#div_allFun");
	 if(div.is(":hidden")){
		 div.show();
	 	 
//		 div.style.left=document.body.scrollLeft+event.clientX+10

			
		

	





	

		

			

				
					
根据鼠标位置显示div

				
			

			

				

					u010034351的专栏
				

				

					09-03
					
					4828
					
				

			

		

		

			
				
根据鼠标位置显示div  
2010-12-06 21:09:41|  分类：

前台 |字号 订阅





    
    
 New Document     
    
//在鼠标显示一个层，该层的内空为div2的内容    
function showTip(){    
var div3 = document.getElementById('div3')

			
		

	





	

		

			

				
					
jquery点击按钮，在指定位置弹出DIV

				
			

			

				

					xinjiatao的专栏
				

				

					06-29
					
					1336
					
				

			

		

		

			
				

 
&lt;!DOCTYPE HTML PUBLIC ""&gt;
&lt;%@ page contentType="text/html; charset=UTF-8"%&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Web&lt;/title&gt;
&lt;style type="text/css

			
		

	





	

		

			

				
					
鼠标点击处出现DIV

				
			

			

				

					zhh0310235的博客
				

				

					08-06
					
					1693
					
				

			

		

		

			
				
有时候根据需要在鼠标点击处出现一个可操作的div：

<html>
<head>
 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function s...

			
		

	





	

		

			

				
					
jquery鼠标移入弹出层_jq: 事件-鼠标

				
			

			

				

					weixin_42425824的博客
				

				

					02-04
					
					459
					
				

			

		

		

			
				
点击在js中，绑定事件函数要具体到元素，如<ul>
    <li>1</li>
    <li>2</li>
</ul>
<script>
    var li0 = document.getElementsByTagName('li')[0];
    li0.onclick = function() {
  ...

			
		

	





	

		

			

				
					
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

				
			

			

				

					10-23
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用jQuery来实现一个可单击弹出的Div层窗口，同时具备可关闭和拖动的功能。这个功能在许多网页应用中都非常常见，它能够为用户提供交互式的用户体验，例如提示信息、用户反馈或者简单...

			
		

	





	

		

			

				
					
鼠标移动到div上显示制定信息或者div（自适应显示位置）

				
			

			

				

					10-11
				

			

		

		

			
				
鼠标移动到div上弹出div或者信息，并且自适应显示位置；每一步代码都有详细的解释；简单，通俗易懂

			
		

	





	

		

			

				
					
鼠标悬停在按钮上弹出DIV层页面，鼠标离开后层消失jquery实例

				
			

			

				

					03-28
				

			

		

		

			
				
鼠标悬停在按钮上弹出DIV层页面，可以点击页面上的链接什么的，鼠标离开后层消失，完美的jquery实例效果，当当网门户效果展示！

			
		

	





	

		

			

				
					
css 鼠标指针定位,如何使用jQuery相对于鼠标指针定位div？

				
			

			

				

					weixin_28903391的博客
				

				

					08-03
					
					422
					
				

			

		

		

			
				
如何使用jQuery相对于鼠标指针定位div？假设我的页面上有一个链接，我希望当我将鼠标放在链接上时，一个div将根据鼠标x，y显示在那里。如何使用jQuery完成此操作？Thomas asked 2020-07-07T17:32:32Z4个解决方案82 votesvar mouseX;var mouseY;$(document).mousemove( function(e) {mouseX = ...

			
		

	





	

		

			

				
					
如何鼠标点击div，弹窗出现在鼠标附近并在可视区域中

				
			

			

				

					ndjiafp的博客
				

				

					12-29
					
					1450
					
				

			

		

		

			
				
function form(id) {//点击事件获取到点击div得id
    var click = document.getElementById(id)//点击div得dom元素
    var alert = document.getElementById("details")//弹出层的dom元素
    click.onmouseup = function (e) {    
        var scrollX = document.documentElement.scrollLeft |

			
		

	





	

		

			

				
					
jquery实现的获取鼠标位置并弹出提示框

				
			

			

				

					每天都记录一点点！
				

				

					11-19
					
					4181
					
				

			

		

		

			
				
在做Web应用的时候，有时候为了增强用户体验，当用户鼠标放在某个图片或者按钮上时，需要给一些互动性的提示。当然，HTML中已经自带了这项功能，就是alt=“”，但有时觉得这个看起来不够美观，所以就自己用css写了个弹出框，并用jquery实现了效果，代码如下：





HTML+CSS圆角提示框

/*提示圆角框*/
.circle_bot { width:80px; clea

			
		

	





	

		

			

				
					
Jquery的鼠标移动上去显示div，鼠标离开的时候隐藏div效果

				
			

			

				

					weixin_30279751的博客
				

				

					07-27
					
					491
					
				

			

		

		

			
				
有时候我们需要这个效果：当鼠标放上去的时候显示一个div，当鼠标移走的时候就将div隐藏了。代码如下，记得引入Jquyer库。（当鼠标移动到id=menu的div上的时候，显示id=list的div，然后将鼠标再次移动到id=list的div上的时候，list的div也不会隐藏）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile=...

			
		

	





	

		

			

				
					
前台JS：通过Hover（鼠标悬停事件）动态悬浮显示DIV的ID

					
热门推荐

				
			

			

				

					.NET开发工程师吃瓜日常的日常
				

				

					01-16
					
					3万+
					
				

			

		

		

			
				
HTML代码：定义两个DIV并设置大小宽度


&lt;div id="Div1" class="div-list" style="width:20px; height:50px; border:1px solid #F00"&gt;
        &lt;a&gt;DIV1&lt;/a&gt;
    &lt;/div&gt;
      &lt;div id="

			
		

	





	

		

			

				
					
jquery点击按钮后出现悬浮div，并且可以挪动其位置

					
最新发布

				
			

			

				

					09-12
				

			

		

		

			
				
在jQuery中，要实现点击按钮后出现悬浮div并且可以挪动其位置，通常需要结合HTML、CSS和JavaScript来完成。以下是一个简单的示例步骤：

1. 首先，创建一个HTML页面，并在其中添加一个按钮和一个初始隐藏的div元素，这个div元素将作为悬浮的层。

```html
<!DOCTYPE html>
<html>
<head>
    <title>悬浮div示例</title>
    <style>
        #floatingDiv {
            display: none;
            position: absolute;
            /* 其他样式设置，比如宽度、高度、边框等 */
        }
    </style>
</head>
<body>

<button id="showBtn">显示悬浮层</button>
<div id="floatingDiv">
    <!-- 悬浮层内容 -->
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        $("#showBtn").click(function(){
            // 显示悬浮层
            $("#floatingDiv").show();
            
            // 绑定鼠标按下事件，准备拖动悬浮层
            $(this).mousedown(function(e){
                var clickX = e.pageX - $("#floatingDiv").offset().left;
                var clickY = e.pageY - $("#floatingDiv").offset().top;
                $(document).on("mousemove", function(e){
                    $("#floatingDiv").css({
                        "left": e.pageX - clickX,
                        "top": e.pageY - clickY
                    });
                });
            });

            // 阻止按钮被再次点击时的默认行为和事件冒泡
            return false;
        });
    });
</script>

</body>
</html>
```

2. 使用CSS来设置悬浮div的初始样式，这里我们将其设置为绝对定位，并且初始时是隐藏的。

3. 利用jQuery监听按钮的点击事件，在按钮被点击时显示悬浮div，并通过绑定`mousedown`、`mousemove`和`mouseup`事件来实现拖动功能。

上述代码展示了基本的实现方法，它包括了在点击按钮后显示一个div元素，并通过鼠标移动事件使其可以被拖动。需要注意的是，在实际应用中，可能需要更复杂的逻辑来处理边界条件、性能优化等问题。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值