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

最新推荐文章于 2021-08-03 18:07:19 发布
最新推荐文章于 2021-08-03 18:07:19 发布
阅读量738 收藏 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
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

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

				
			

			

				

					weixin_29166013的博客
				

				

					06-07
					
					1234
					
				

			

		

		

			
				
本文实例讲述了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
					
					8390
					
				

			

		

		

			
				
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
					
					4827
					
				

			

		

		

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

前台 |字号 订阅





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

			
		

	





	

		

			

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

				
			

			

				

					xinjiatao的专栏
				

				

					06-29
					
					1335
					
				

			

		

		

			
				

 
&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
					
					1686
					
				

			

		

		

			
				
有时候根据需要在鼠标点击处出现一个可操作的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
					
					448
					
				

			

		

		

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

			
		

	





	

		

			

				
					
jQuery实现鼠标经过弹出提示信息的地图热点效果

				
			

			

				

					10-23
				

			

		

		

			
				
### jQuery实现鼠标经过弹出提示信息的地图热点效果知识点  #### jQuery基础知识 - **引入jQuery**: 文档中提到了通过`<script>`标签引入jQuery库(`jquery-1.6.2.min.js`)，这是使用jQuery的前提条件。jQuery是一个...

			
		

	





	

		

			

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

				
			

			

				

					10-11
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					weixin_28903391的博客
				

				

					08-03
					
					415
					
				

			

		

		

			
				
如何使用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
					
					1413
					
				

			

		

		

			
				
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
					
					4178
					
				

			

		

		

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





HTML+CSS圆角提示框

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

			
		

	





	

		

			

				
					
jquery鼠标滑过显示DIV，鼠标移开隐藏DIV

				
			

			

				

					网微鸣的工作空间
				

				

					03-22
					
					7573
					
				

			

		

		

			
				
用到了jquery，实现鼠标滑过显示DIV，鼠标移开隐藏DIV，可以同时支持多个层显示，代码如下：







随便玩玩


body
{
background-color:#999999;
}
 
#myDiv
{
background-color:#FFFFFF;
width:250px;
height:250px;
display:none;
}

			
		

	





	

		

			

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

				
			

			

				

					weixin_30279751的博客
				

				

					07-27
					
					479
					
				

			

		

		

			
				
有时候我们需要这个效果：当鼠标放上去的时候显示一个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悬浮窗，根据鼠标位置显示

				
			

			

				

					Inuyasha1121的专栏
				

				

					01-19
					
					1万+
					
				

			

		

		

			
				
hover一个位置就在位置右侧显示悬浮窗，代码如下：
JS:


$(function () {
    //hover某处显示悬浮框
    $("#createtable").mouseover(function(e){
        //获取鼠标位置函数
        var mousePos = mousePosition(e);
        var  xOffset = 2

			
		

	





	

		

			

				
					
使用JQuery创建自定义鼠标右键菜单

				
			

			

				

					
				

			

		

		

			
				
本文主要讲解如何使用JQuery在网页中模拟实现自定义的鼠标右键菜单功能，适合学习和工作中需要此类功能的开发者参考。  在网页设计中，有时候我们需要对鼠标右键点击事件进行定制，以提供特定的功能或增强用户体验。...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值