`

JQuery 悬浮层效果

阅读更多
<script type="text/javascript">
 
//页面加载完成 -textarea 悬浮效果
$(function () { 
    var x = 10; 
    var y = 20; //设置提示框相对于偏移位置,防止遮挡鼠标 
    $("#textarea_id").hover(function (e) {  //鼠标移上事件 
        var text = gettext();
        var tooltipHtml = "<div id='tooltip'>" + text + "</div>"; //创建提示框 
        $("body").append(tooltipHtml); //添加到页面中 
        $("#tooltip").css({ 
            "top": (e.pageY + y) + "px", 
            "left": (e.pageX + x) + "px",
            "position":"absolute"
        }).show("fast"); //设置提示框的坐标,并显示 
    }, function () {  //鼠标移出事件 
        $("#tooltip").remove();  //移除弹出框 
    }).mousemove(function (e) {   //跟随鼠标移动事件 
        $("#tooltip").css({ "top": (e.pageY + y) + "px", 
            "left": (e.pageX + x) + "px" , "position":"absolute"
        }); 
    }); 
    function gettext(){
      return '1231';
    }
    
}); 
    </script>
  <body>
       <textarea id="textarea_id" rows="5" cols="20" >........</textarea>
  </body>

 

分享到:
评论

相关推荐

    jquery悬浮层,鼠标悬浮动态添加显示内容

    在IT行业中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互...结合HTML、CSS和JavaScript,开发者可以创建各种富有吸引力的悬浮层效果,为用户提供更直观、丰富的信息展示。

    jQuery聚美优品右侧悬浮层

    4. **动画效果(Animations)**:jQuery的`.animate()`方法可用于创建平滑的过渡效果,比如当用户滚动页面时,悬浮层可以有优雅的淡入淡出效果。 5. **插件(Plugins)**:jQuery生态系统中有许多插件可供使用,如`...

    jquery右侧悬浮层菜单.rar

    在这个项目中,jQuery被用来实现悬浮层菜单的动态效果,如平滑地显示和隐藏菜单,以及可能的动画过渡。 【悬浮导航】与悬浮菜单类似,是指在页面滚动时始终显示在屏幕某一位置的导航元素。它可能是整个导航栏,也...

    jquery 悬浮 导航栏

    "jQuery 悬浮导航栏"是一种常见的网页交互效果,当用户滚动页面时,导航栏会固定在屏幕顶部,始终保持可见,提供便捷的导航。在本篇文章中,我们将深入探讨如何使用 jQuery 实现这一功能,以及其背后的原理和技术...

    jquery悬浮层插件制作网页qq在线客服代码

    首先,让我们理解jQuery悬浮层的概念。悬浮层通常是指在网页上浮动显示的元素,它可以是通知、广告或者如本例中的在线客服窗口。通过CSS样式和JavaScript/jQuery的控制,悬浮层可以固定在屏幕的一侧或角落,无论用户...

    60、jQuery cookie右下角新闻悬浮层

    4. **动画效果**:jQuery的动画功能使得创建平滑过渡效果变得简单,例如,可以使用fadeIn/fadeOut方法实现悬浮层的显示和隐藏,或者使用animate方法实现平滑移动。 接下来,Cookie在实现新闻悬浮层中的作用: 1. *...

    jQuery cookie右下角新闻悬浮层.zip

    本文将深入探讨“jQuery cookie右下角新闻悬浮层”这一话题,它是利用jQuery结合Cookie技术来实现一个功能,即在网页右下角显示一个可以关闭或最小化的新闻悬浮层。 首先,我们需要理解jQuery的核心概念。jQuery...

    jquery左侧悬浮层帮助菜单点击收缩悬浮层帮助菜单

    对于"jquery左侧悬浮层帮助菜单点击收缩悬浮层帮助菜单"这个主题,我们将深入探讨如何利用jQuery实现这样一个功能:在网页左侧创建一个悬浮的帮助菜单,用户点击时可以展开或收缩该菜单。 首先,我们需要创建HTML...

    jquery固定悬浮二维码在线客服.zip

    这篇文章将深入探讨“jQuery网页右侧固定悬浮层qq在线客服,服务热线,扫一扫二维码,购物车、页面滚动返回顶部代码”这一主题。这个项目利用了jQuery、CSS3和HTML三种技术,构建了一个实用的网页交互功能模块,适用...

    jQuery仿Discuz右下角悬浮层提示.zip

    【jQuery仿Discuz右下角悬浮层提示】是一款利用JavaScript库jQuery实现的网页动态效果,其设计灵感来源于知名的论坛系统Discuz。这个效果主要用于在页面的右下角展示信息提示,如通知、消息或者广告等,它会在用户...

    jquery css3图片标注悬浮层提示效果代码

    本资源“jquery css3图片标注悬浮层提示效果代码”提供了一种使用jQuery和CSS3实现的方法,来创建动态、美观的图片标注和悬浮层效果。下面将详细介绍这个实现过程中的关键知识点。 首先,jQuery是一种广泛使用的...

    jquery左侧悬浮收缩菜单

    在这个案例中,jQuery被用来实现菜单的动态效果,如悬浮和收缩。 悬浮效果是通过CSS(层叠样式表)和JavaScript共同实现的。CSS中的`position: fixed`属性可以让元素始终保持在屏幕的某一位置,即使在滚动页面时也...

    jQuery中国省份地图悬浮层简介特效代码

    综上所述,jQuery中国省份地图悬浮层简介特效代码通过结合HTML、CSS和JavaScript,利用jQuery的强大功能,实现了交互式地图的效果,为用户提供了一种直观且富有吸引力的方式来探索和理解中国的省份信息。这种技术...

    带动画效果jQuery悬浮QQ客服.zip

    【标题】"带动画效果jQuery悬浮QQ客服"指的是一个基于jQuery技术实现的前端网页功能,它可以在用户浏览页面时,以动画形式展示一个悬浮的QQ客服图标,方便用户随时咨询。 【描述】这个描述简单地指出该压缩包包含的...

    Jquery悬浮微信二维码微博分享置顶特效【优秀源码】

    Jquery悬浮微信二维码微博分享置顶特效,此作品是一款非常棒的特效,集合了多种功能,实现了jquery悬浮微信二维码、微博分享、置顶特效、鼠标悬浮、弹出层、滚动条滑动、动画效果等,主要用jquery基础代码实现的,...

    jQuery悬浮提示框Demo,非常经典jquery-impromptu

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM...学习和掌握jQuery悬浮提示框,特别是"jquery-impromptu"的使用,将有助于提升你的前端开发能力,为用户提供更加友好的交互体验。

    jquery 返回顶部的悬浮插件

    **jQuery 返回顶部悬浮插件详解** 在网页设计中,当页面内容较长时,为了方便用户快速返回页面顶部,通常会添加一个返回顶部的悬浮按钮。本文将深入解析一个基于jQuery实现的高效、炫酷的返回顶部插件。该插件代码...

    jquery图片悬浮提示,带遮罩层,含标题,简介和链接

    本篇文章将详细解析一个名为“jQuery图片悬浮提示,带遮罩层,含标题,简介和链接”的特效,包括其工作原理、实现方法以及对IE6的兼容性处理。 1. **jQuery基础** jQuery是一款流行的JavaScript库,简化了DOM操作...

    JQuery 鼠标悬浮,图片遮罩效果

    "JQuery 鼠标悬浮,图片遮罩效果"就是一种常见的交互设计,它使得用户在鼠标悬停在图片上时,图片会出现一层半透明的遮罩层,通常用于展示额外信息或者作为点击触发的视觉提示。这种效果可以增加网站的动态感和专业...

    jQuery仿Discuz右下角悬浮层提示

    【jQuery仿Discuz右下角悬浮层提示】是一种常见的网页交互设计,用于向用户显示重要的通知、消息或者提示信息。这种设计通常出现在页面的右下角,不会干扰用户的主要操作,同时又能确保用户能注意到这些信息。在网页...

Global site tag (gtag.js) - Google Analytics