jQuery实现的简单悬浮层功能完整实例

  • 更新时间:2022-12-03 09:29:44
  • 编辑:叶俊友
本站精选了一篇jQuery相关的编程文章,网友国波光根据主题投稿了本篇教程内容,涉及到jQuery、悬浮层相关内容,已被886网友关注,下面的电子资料对本篇知识点有更加详尽的解释。

参考资料

正文内容

本文实例讲述了jQuery实现的简单悬浮层功能。分享给大家供大家参考,具体如下:

运行效果图如下:

jQuery实现的简单悬浮层功能完整实例

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" >
$(function() {
  var timer, scrollTop, sideDiv = $('#fudong').appendTo('body');
  $(window).scroll(function() {
    timer && clearTimeout(timer);
    scrollTop = $(this).scrollTop();
    timer = setTimeout(function() {
      sideDiv.animate({
        top: scrollTop + 100 + 'px'
      }, 600);
    }, 200);
  });
});
</script>
</head>
<body >
<div id="fudong" >
  右侧悬浮层
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery相关教程

  • jQuery fadeTo方法调整图片的透明度用法说明

    利用jquery的fadeTo方法可以简单的制作一些很不错的动画效果.可以使图片或者文字或者区块以不同的透明度效果出现.例如以下练习实例,感兴趣的朋友可以参考下哈

    发布时间:2020-06-22

  • jquery中 $.expr使用实例详解

    这篇文章主要以示例介绍了jquery中 $.expr使用,需要的朋友可以参考下

    发布时间:2020-01-28

  • 解析jquery中使用$(#form).submit()重写提交表单无效原因

    jqeury的validationEngine做ajax校验,当表单中的最后一个字段需要做ajax验证,在字段输入完毕后点击回车提交表单时不起作用,接下来为大家介绍下解决方法感兴趣的各位可以参考下哈

    发布时间:2020-01-26

  • 基于jquery的9行js轻松实现tab控件实例详解

    tab控件的实现方法有很多,在本文为大家详细介绍下如何通过9行js实现简单的tab控件,感兴趣的朋友不要错过

    发布时间:2020-01-10

  • jQuery同步提交的实现代码分享

    这篇文章主要介绍了jQuery同步提交实现方法,实例分析了jQuery基于ajax实现同步提交的具体技巧,以及jQuery版本更新的使用注意事项,需要的朋友可以参考下

    发布时间:2019-11-23

  • jQuery联动日历的实例代码

    本篇文章主要对jQuery联动日历的实例进行解析说明。有兴趣的朋友可以下载源码调试运行试试看,希望对大家有所帮助

    发布时间:2019-08-09

  • jQuery实现多按钮单击变色的代码详解

    本文给大家分享的是一段使用jQuery实现的多按钮单击之后变色的代码,非常的简单实用,有需要的小伙伴可以参考下。

    发布时间:2020-03-30

  • jQuery实现弹幕APP的实例分析

    这篇文章主要为大家详细介绍了基于jQuery实现弹幕APP的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    发布时间:2021-10-08

用户留言