`
stinge
  • 浏览: 153713 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery:鼠标与div的坐标位置

阅读更多

jQuery鼠标与div的坐标位置

 

情景:当鼠标离开div时3秒后删除该div

该div的class为sp

 

 

function spon_out(event){
    var x=event.pageX-this.offsetLeft;
    var y=event.pageY-this.offsetTop;
   if(x < 0 || x > 260 || y < 0 || y > 100){
     removeDiv();
   }
  }
 

 

 

 $(".sp").mouseout(spon_out);
   

 

function removeSponsorDiv(){
    $('#sponsor_div').remove();
    //$(".sponsor_a").bind("mouseover",sponsor_fun);
  }
  function removeDiv(){
    sponsor_timer = setTimeout("removeSponsorDiv()",3000);
  }

 

    OK!

0
2
分享到:
评论

相关推荐

    JQuery获取鼠标坐标

    `event`对象包含了一系列与鼠标位置相关的属性,如`pageX`和`pageY`,它们分别表示鼠标相对于整个文档的横向和纵向位置;而`clientX`和`clientY`则表示相对于当前可视窗口的位置。 #### 代码实现 ```html ...

    jQuery浮动层 jQuery实现div跟着鼠标走

    要实现"div跟着鼠标走"的效果,主要涉及到jQuery中的两个关键函数:`mousemove`和`css`。`mousemove`是jQuery的事件绑定函数,用于监听鼠标移动事件;`css`则用于修改元素的样式,包括位置属性。 1. **创建HTML结构...

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

    现在,我们需要使用JavaScript(这里我们可以使用jQuery库,因为它简洁易懂)来监听"hover-div"的`mouseover`和`mouseout`事件,以便在鼠标进入和离开时显示和隐藏"info-div"。同时,我们还需要计算"info-div"的显示...

    js与jquery中获取当前鼠标的x、y坐标位置的代码.docx

    在JavaScript和jQuery中,获取当前鼠标的X、Y坐标位置是一项常见的需求,特别是在实现交互式功能或跟踪用户鼠标活动时。下面将详细讲解如何在两种环境下实现这一功能。 ### JavaScript 获取鼠标坐标 在纯...

    根据鼠标位置弹出div

    标题“根据鼠标位置弹出div”涉及到的是网页交互设计中的一个常见需求,即在用户将鼠标移动到特定位置时,动态显示一个div元素,通常用于提示信息、下拉菜单或其他功能模块。这个功能主要通过JavaScript或者jQuery等...

    div随意拖动 记住坐标

    在网页设计中,"div随意拖动 记住坐标"是一种常见的交互功能,它允许用户通过鼠标拖动HTML中的div元素,并在松开鼠标时记录下该div元素的新位置坐标。这种功能通常结合JavaScript库,如jQuery UI的draggable插件来...

    jquery: JS淘宝网产品图片局部放大代码

    5. 优化与拓展:为了提高用户体验,可以添加一些额外的功能,比如鼠标进入时显示放大镜图标,增加平滑过渡效果,以及考虑图片加载延迟等情况。 四、实践与调试 将以上代码应用到实际项目中,调整参数以适应不同尺寸...

    jQuery背景图片跟随鼠标摆动动画特效

    3. **编写JavaScript代码**:使用jQuery的`mousemove`事件监听鼠标的移动,根据鼠标的坐标改变背景图片的位置或角度。以下是一个简单的示例: ```javascript $(document).ready(function() { $('#background-image'...

    index(可移动最小化最大化div,鼠标坐标显示).zip

    4. 鼠标坐标显示:描述中提到的“鼠标坐标显示”可能是指当鼠标在div上移动时,实时显示鼠标的坐标值。这可以通过监听`mousemove`事件并使用`event.clientX`和`event.clientY`获取鼠标坐标,然后将其显示在div内或...

    jQuery鼠标移动发出气泡动画

    &lt;title&gt;jQuery鼠标移动气泡动画 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; &lt;canvas id="bubbleCanvas" width="800" height="600"&gt;&lt;/canvas&gt; &lt;div id="bubbleContent"&gt;Hello, ...

    jquery坐标标尺滑动效果.rar

    《jQuery坐标标尺滑动效果实现详解》 在网页开发中,为了提升用户体验,我们经常需要引入各种交互式特效,其中坐标标尺滑动效果是一种常见的动态展示数据的方式。本篇将详细介绍如何利用jQuery库来实现这一效果,...

    jQuery背景图片跟随鼠标摆动特效.zip

    然而,直接将鼠标坐标作为背景位置会导致图片瞬间移动到鼠标下方,这可能过于突兀。为了实现平滑的过渡效果,我们可以引入CSS3的transition属性,设定背景位置的过渡时间。 ```css body { background-size: cover;...

    jQuery实现div跟随鼠标移动

    关键在于理解和处理鼠标位置与div元素位置之间的关系。 首先,我们需要了解几个基本概念: 1. **鼠标坐标**:`e.pageX` 和 `e.pageY` 是jQuery事件对象中的属性,它们分别表示鼠标在当前视口的水平和垂直坐标。当...

    DIV可移动 可实现任意拖动放大缩小

    3. **坐标计算**:在`mousemove`事件处理函数中,我们需要计算鼠标的相对位置,以确定div的新位置。这涉及到获取鼠标的当前位置和div的初始位置,然后更新div的`style.left`和`style.top`属性。 4. **缩放功能**:...

    jquery元素跟随鼠标移动.rar

    综上所述,"jquery元素跟随鼠标移动"这一特效涉及到jQuery的选择器用于选取元素,事件处理机制用于监听鼠标移动,以及CSS定位技术用于动态调整元素位置。通过理解和掌握这些知识点,不仅可以创建有趣的交互效果,也...

    jquery实现拖拽调整Div大小

    这要求在鼠标事件处理函数中判断鼠标当前的坐标与DIV的宽度、高度以及页面滚动的距离等数据。 6. 鼠标拖拽事件的触发与解除 在鼠标按下时,通过函数downHandler绑定mousemove和mouseup事件。这样当鼠标移动时可以...

    jquery 制作可拖拽的div实例

    在`mousemove`事件中,我们根据鼠标的当前位置更新div的位置。最后,在`mouseup`事件中,我们结束拖动状态。 通过这种方式,用户就可以在页面上自由拖动id为`draggableDiv`的div元素。请注意,这个实例仅限于在页面...

    jquery鼠标移动放大图片

    "jQuery鼠标移动放大图片"是一种常见的交互效果,它允许用户在鼠标悬停于图片上时,看到一个放大的图片视图。本文将深入探讨如何使用jQuery库来实现这一功能。 首先,jQuery是一个广泛使用的JavaScript库,它简化了...

    jquery 鼠标放上去后出现的提示效果

    这可以通过 jQuery 的 `.offset()` 和 `.position()` 方法,结合鼠标的坐标来完成。 6. **动画效果**:jQuery 的 `.fadeIn()`, `.fadeOut()`, `.show()`, `.hide()` 等方法可以用来创建平滑的动画效果,增强用户...

    jQuery鼠标右键点击显示菜单.zip

    本示例“jQuery鼠标右键点击显示菜单”是基于jQuery-1.11.2.min.js版本实现的一个功能,允许用户在网页上的任意位置通过鼠标右键点击来触发一个下拉菜单。 首先,我们需要了解jQuery的核心概念。jQuery库通过提供...

Global site tag (gtag.js) - Google Analytics