`
DanaJeanie
  • 浏览: 3250 次
  • 性别: Icon_minigender_2
  • 来自: 南京
最近访客 更多访客>>
社区版块
存档分类
最新评论

JQuery浮动层

阅读更多
引用
<html>
<head>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
   $(this).scroll(function(){
     $("#div0").css("top",$(this).scrollTop()+300);
   }) 
</script>
</head>
<body> 
<div style="height:1800px;"></div>
<div id="div0" style="position:absolute;background-color:red;width:100px;height:100px;left:20px;top:300px;">浮动</div>
</body>
</html>

这两天在想写一个浮动层,可是用一般的JS写,总会要考虑到浏览器兼容的问题,所以就想用JQuery写。
自己挺懒的,所以就想找一个现成的列子,可是找到的一些都是还要考虑浏览器兼容的问题的(在获取scrollTop时),所以自己就直接用了JQuery的$(this).scrollTop()方法获得当前窗口的scrollTop,本来也就想试一试,没想到IE7.0,FireFox3.6都可以,后来想想是不是遨游和Opera也可以,就也都试了一下,也可以,贴出来,大家分享一下。
分享到:
评论

相关推荐

    jquery 浮动层插件

    **jQuery浮动层插件详解** 在网页开发中,浮动层(通常称为弹窗或对话框)是一种常见的交互设计元素,用于展示重要的信息、提示、表单或者任何需要用户注意的内容。jQuery作为一款广泛使用的JavaScript库,提供了...

    jQuery精美浮动层效果

    实现jQuery浮动层效果的关键步骤包括: 1. **引入jQuery库**:首先,在HTML文件中引入jQuery库。你可以通过CDN链接或本地文件路径来实现,例如: ```html &lt;script src="https://code.jquery....

    jQuery浮动层点击图标按钮关闭或展开

    总的来说,实现“jQuery浮动层点击图标按钮关闭或展开”的功能涉及jQuery的选择器、事件绑定、CSS样式控制以及可能的动画效果。通过结合这些技术,我们可以创建出互动性强且用户体验良好的网页元素。

    jquery浮动层动画loading页面加载特效

    "jQuery浮动层动画loading页面加载特效"就是一种这样的解决方案,它利用JavaScript库jQuery的强大功能,结合CSS动画,为用户展示了一个美观且具有提示性的加载过程。 jQuery是一个轻量级、高性能的JavaScript库,它...

    jquery浮动层

    "jquery浮动层"是利用jQuery实现的一种网页元素动态显示技术,通常用于创建提示框、广告横幅或者下拉菜单等需要跟随用户滚动页面而始终保持可见的元素。 浮动层的核心原理是通过CSS定位和jQuery的动态计算来实现。...

    jquery浮动层,跳转到页面指定链接

    标题中的“jquery浮动层,跳转到页面指定链接”指的是使用jQuery库来创建一个浮动的层(通常称为弹出窗口或对话框),该层能够帮助用户实现页面内部或外部的链接跳转。jQuery是一个强大的JavaScript库,它简化了HTML...

    jQuery浮动层带阴影的图片展示特效

    接下来,我们来分析"jQuery浮动层带阴影的图片展示特效"的实现步骤: 1. **引入jQuery库**:首先,需要在HTML文档的部分添加jQuery库的链接,通常从CDN获取,如`&lt;script src="https://code.jquery....

    Jquery浮动层插件modal(四种样式,附本人整理文档)

    **jQuery浮动层插件——Modal详解** 在网页开发中,我们常常需要实现一种效果:当用户点击某个元素或触发特定事件时,一个弹出框突然出现在页面中央,阻止用户与背景交互,直到用户关闭该弹出框为止。这种效果通常...

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

    接下来,我们用jQuery编写JavaScript代码来实现浮动层的动态效果: ```javascript $(document).ready(function() { var floatingLayer = $('#floatingLayer'); floatingLayer.css('display', 'block'); // 显示...

    iCal-like Calendar jQuery浮动层漂亮日历特效.rar

    iCal-like Calendar jQuery浮动层漂亮日历特效,带有颜色的每个框中,当鼠标悬停于上面时,会显示出浮动层,记录当天需要完成的事项,有此可扩展出基于此的日程管理程序,也可修改成WEb版日历选择器插件,效果不错。

    基于jQuery精美浮动层效果

    **jQuery精美浮动层效果详解** 在网页开发中,浮动层(通常称为弹窗或提示框)是一种常见的交互设计元素,用于展示重要的信息、...总的来说,掌握jQuery浮动层的实现方法,能够帮助开发者提高网页的用户体验和互动性。

    jQuery浮动层页面加载效果

    这就是我们今天要讨论的"jQuery浮动层页面加载效果"。 jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。在本实例中,jQuery被用来创建一个浮动层,这个浮动层会在...

    jquery浮动层制作右下角float浮动提示框向上滑动提示

    在网页设计中,浮动层(Float Layer)是一种常见的交互元素,用于向用户显示临时通知、提示信息或广告。本教程将详细介绍如何使用jQuery库来创建一个位于页面右下角的浮动提示框,并实现向上滑动的动画效果,类似于...

    jQuery弹出层与浮动层

    二、jQuery浮动层(Overlay) 浮动层通常用于覆盖整个页面,显示通知、广告或者背景图片。它不阻塞用户与页面的交互,但会吸引用户的注意力。 1. Simple Modal: Simple Modal是一个轻量级的jQuery插件,用于快速...

    Jquery左右浮动层

    Jquery左右浮动层就是利用JavaScript库Jquery实现的一种动态效果,它可以模拟类似“点击收藏到”的行为,使得用户在不离开当前页面的情况下,能够方便地访问或执行其他操作。下面我们将深入探讨Jquery左右浮动层的...

    Jquery 鼠标浮动层

    在网页设计中,提高用户体验是至关重要的,"Jquery 鼠标浮动层"就是一种实现这一目标的技术手段。这个技术允许用户在鼠标悬停在某个元素(如标题)上时,显示更多的相关信息,而无需点击或滚动页面,极大地提高了...

    jQuery制作顶部浮动层显示隐藏点击图标按钮浮动展开

    &lt;title&gt;jQuery顶部浮动层 &lt;script src="js/jquery.min.js"&gt; ``` 接下来,我们创建一个HTML元素作为浮动层,例如一个`div`元素,设置相应的CSS样式使其在页面顶部固定。我们可以将这个`div`元素隐藏,以便在用户...

    jquery弹出左侧隐藏的浮动层

    对于"jquery弹出左侧隐藏的浮动层"这个主题,我们将探讨如何使用jQuery来实现这样的功能,即在用户触发特定事件时,从页面左侧弹出一个之前隐藏的浮动层。 首先,我们需要在HTML中创建浮动层的基本结构。这个浮动层...

Global site tag (gtag.js) - Google Analytics