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

jquery实现浮动面板 监听页面滚动和大小变化事件

 
阅读更多
    (function showQQPanel(){     
        var _windowScrollTop=0;    //滚动条距离顶端距离     
        var _windowWidth=jQuery(window).width(); //窗口宽度     
        jQuery(window).scroll(actionEvent).resize(actionEvent);  //监听滚动条事件和窗口缩放事件     
             
            //响应事件     
        function actionEvent(){     
            _windowScrollTop = jQuery(window).scrollTop();  //获取当前滚动条高度     
            _windowWidth=jQuery(window).width();//获取当前窗口宽度     
            moveQQonline();//移动面板     
        }     
            //移动面板     
        function moveQQonline(){     
                    //.stop()首先将上一次的未完事件停止,否则IE下会出现慢速僵死状态,然后重新设置面板的位置。     
            $("#divQQbox").stop().animate({     
                right:5, top: _windowScrollTop+145     
                 }, "normal");     
        }     
    })(); 
 
分享到:
评论

相关推荐

    jQuery版简单易用的可拖动右下角浮动窗口.zip

    这需要通过监听窗口滚动事件来动态调整浮动窗口的位置,使其始终保持在屏幕的右下角。这可能涉及到CSS定位属性,如`position: fixed`,以及`top`和`right`属性的计算。 在实际应用中,这个jQuery插件可能包含以下...

    jquery-powerFloat(jQuery万能浮动框插件).zip

    总结,jQuery PowerFloat作为一款强大的浮动框插件,不仅简化了开发过程,还提高了页面的交互性和用户体验。通过理解其核心概念和功能,开发者可以自如地应用于各种Web项目,打造更加生动、个性化的网页界面。

    跟随页面移动鼠标可拖拽的浮动层

    5. **兼容性和优化**:确保在不同浏览器和设备上都能正常工作,可能需要处理触摸屏设备的拖拽事件,并考虑性能优化,如使用节流或防抖函数来减少频繁的滚动事件处理。 通过以上技术,我们可以创建一个既能够跟随...

    浮动文字下拉左侧固定文字.zip

    3. **JavaScript逻辑**:JavaScript部分主要用于监听滚动事件(`window.onscroll`)。当用户滚动页面时,这段代码会更新浮动面板的位置,确保它始终保持在可视区域内。这通常涉及到计算滚动条的位置,然后更新浮动...

    超实用的jQuery代码段

    超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...

    js写的很特别的一款网页右侧悬浮QQ在线客服代码,带有五屏广告幻灯片功能,支持自动收缩隐藏客服面板

    这通常通过监听用户的滚动事件和设置合适的条件来实现,例如当用户滚动到一定距离时,面板会自动收起。 5. **兼容性**:此代码特别强调了对旧版IE浏览器(如IE7、IE8、IE9和IE10)以及主流现代浏览器的支持。这意味...

    jq右侧微信返回顶部.zip

    3. 用JavaScript或jQuery监听滚动事件,根据滚动位置动态改变按钮的可见性。 4. 编写点击事件的回调函数,利用`window.scrollTo`或jQuery的`animate`方法实现页面平滑滚动到顶部。 通过这个实践,你可以深入理解CSS...

    浮动窗口

    这可以通过监听滚动事件和定时器来实现。 ```javascript window.addEventListener('scroll', function() { var ad = document.querySelector('.floating-ad'); if (/* 判断是否达到显示条件 */) { ad.style....

    JQuery新浪1630个表情插件.zip

    通过JQuery,开发者可以更高效地编写JavaScript代码,实现网页的动态效果和交互功能。 在JQuery新浪1630个表情插件中,其核心功能是将新浪的大量表情资源集成到网页的文本输入框中。这些表情通常以图片形式存在,...

    Asp.net 2.0 自定义控件开发[浮动工具条控件].rar

    7. **CSS和JavaScript**:为了实现浮动效果,通常会结合CSS样式和JavaScript/jQuery来定位工具条,使其始终在页面的某个位置浮动。例如,可以使用position: fixed属性,并通过JavaScript监听窗口滚动事件来实时调整...

    jquery.ui by cai

    滑块可以通过`$.ui.slider`初始化,并通过事件监听器响应用户的滑动操作,更新关联的输入字段或其他UI元素。 **3. jQuery UI Accordion(手风琴)** `accordion.html`演示了手风琴组件,这是一种节省空间的布局...

    jquery php弹出滑块效果.rar

    【标题】"jQuery PHP弹出滑块效果"指的是在网页中使用jQuery库和PHP技术实现的一种动态交互功能,即当用户触发某个事件(如点击按钮)时,会弹出一个带有滑动效果的窗口或面板。这种效果常用于创建模态对话框、通知...

    jQuery EasyUI 1.5.1 中文API文档(chm、exe、pdf)

    在学习jQuery EasyUI的过程中,开发者需要理解每个组件的基本用法,熟悉它们的配置属性,掌握事件监听和方法调用,还要了解如何通过CSS样式调整组件的外观。通过阅读提供的API文档,无论是chm、exe还是pdf版本,都能...

    jQuery EasyUI 1.5.2 离线简体中文API文档

    1. **布局(Layout)**:提供多区域的页面布局,如north、south、east、west和center,可自由调整大小和折叠。 2. **窗口(Window)**:创建弹出式或浮动的窗口,支持拖动、最大化、最小化和关闭等操作。 3. **...

    强大的javascript特效

    2. 滚动事件:监听页面滚动,根据滚动位置触发特定效果,例如固定导航栏、视差滚动背景等。 3. 图片懒加载:提高页面加载速度,只有当图片进入可视区域时才加载,常用库如lozad.js或lazysizes。 4. 弹出框插件:...

    jQuery EasyUI 1.5 版 API 中文版

    - **事件监听**:绑定和解绑事件,如onClick、onLoad等。 - **方法调用**:如open、close、resize等,用于控制组件状态。 - **属性设置**:动态修改组件属性,实现动态配置。 8. **主题与皮肤**: - **内置主题...

    前端拖拽布局框架.pdf

    在拖拽布局中,JavaScript主要用于处理拖放事件,监听鼠标动作,更新元素的位置和大小。 1. JS基本特效: - Tab切换:通过改变显示和隐藏的内容实现面板间的切换。 - 导航:制作动态导航菜单,如下拉菜单和悬浮...

    tabs滑动门 javascript js 单独封装文件

    你可以使用浮动、定位、flexbox或grid布局来实现tab按钮的水平排列和内容面板的隐藏/显示。使用`:hover`和`active`伪类可以为当前选中的tab按钮添加高亮效果。 3. JavaScript/jQuery 实现:核心的交互逻辑通常由...

    经典的DIV+CSS小代码

    这涉及到CSS的媒体查询(Media Queries)以及JavaScript的事件监听和DOM操作。 3. **jQuery仿微博文字滚动,向下滚动.htm** 这个文件使用jQuery库实现了一个类似微博的文字滚动效果,可能是通过定时器更新元素的...

    30个搜藏的国外精美js特效

    4. **滚动动画**:通过监听窗口滚动事件,JS可以实现页面元素随着滚动条位置变化而触发的动画效果,如视差滚动、滚动加载等。 5. **表单验证**:利用JS,可以在用户填写表单时实时检查输入的有效性,避免提交无效...

Global site tag (gtag.js) - Google Analytics