脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery页面下拉100像素出现悬浮窗口

jQuery实现页面下拉100像素出现悬浮窗口的方法

 更新时间：2016年09月05日 15:13:08   作者：onestopweb  
这篇文章主要介绍了jQuery实现页面下拉100像素出现悬浮窗口的方法,涉及jQuery事件监听及针对页面元素的判定与动态操作技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现页面下拉100像素出现悬浮窗口的方法。分享给大家供大家参考，具体如下：

<!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>JS 页面下拉100像素出现悬浮窗口</title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
</head>
<body>
<div style="height:5000px;"></div>
<style type="text/css">
.fdPhone{position:fixed; _position:absolute; width:320px; height:50px; position:fixed; left:50%; margin-left:-160px; top:0px; display:none;}
</style>
<div class="fdPhone">
<a href="tel:123456789" target="_blank"><img src="images/phone.gif" width="320" height="50"></a>
</div>
<script type="text/javascript">
$(function(){
  $(window).scroll(function() {
    if($(window).scrollTop() >= 100){ //向下滚动像素大于这个值时，即出现浮窗~
      $('.fdPhone').fadeIn(300); //浮窗淡入的时间，越小出现的越快~
    }else{
      $('.fdPhone').fadeOut(300); //浮窗淡出的时间，越小消失的越快~
    }
  });
  $('.actGotop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //浮窗动画停留时间，越小消失的越快~
});
</script>
</body>
</html>

效果图：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

相关文章

  • JQuery入门——用映射方式绑定不同事件应用示例

    JQuery入门——用映射方式绑定不同事件应用示例

    通过映射的方式，给对象绑定多个事件,可能有很多的童鞋们不从使用过，不过，没有关系本文将一一为您详细介绍，感兴趣的朋友可不要错过了啊，希望本文对你有所帮助
    2013-02-02
  • jQuery简单实现图片预加载

    jQuery简单实现图片预加载

    我们在做网站的时候经常会遇到这样的问题：一个页面有大量的图片导致页面加载速度缓慢，经常会出现一个白页用户体验很不好。那么如何解决这个问题呢？下面我来介绍一种在实际应用中经常会使用到的js预加载的方法。
    2015-04-04
  • JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)

    JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)

    这篇文章主要是对JS和JQUERY获取页面大小,滚动条位置,元素位置的示例代码进行了介绍。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • jQuery DOM操作实例

    jQuery DOM操作实例

    本文用代码的方式详细讲解了jQuery的DOM操作,具体操作方法请详细参看代码中的注释部份
    2014-03-03
  • 基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)

    基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)

    这篇文章主要介绍了基于jQuery实现仿搜狐辩论投票动画代码 的相关资料,需要的朋友可以参考下
    2016-02-02
  • jQuery中可见性过滤器简单用法示例

    jQuery中可见性过滤器简单用法示例

    这篇文章主要介绍了jQuery中可见性过滤器简单用法,结合实例形式简单分析了jQuery中可见性过滤器的原理及相关使用技巧,需要的朋友可以参考下
    2018-03-03
  • jQuery插件autocomplete使用详解

    jQuery插件autocomplete使用详解

    这篇文章主要为大家详细介绍了jQuery插件autocomplete使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • jquery实现表格奇数偶数行不同样式(有图为证及实现代码)

    jquery实现表格奇数偶数行不同样式(有图为证及实现代码)

    表格奇数偶数行不同样式,相信很多网友都想试试手吧，由于经验上千所以只能半途而废，为了响应网友的心声，本文整理了一些操作技巧，有图为证，感兴趣的朋友可以了解下哦
    2013-01-01
  • jquery触发a标签跳转事件示例代码

    jquery触发a标签跳转事件示例代码

    本文为大家详细介绍下如何使用jquery触发a标签的跳转事件，感兴趣的朋友可以参考下哈，希望对大家有所帮助
    2013-07-07
  • 简单实现兼容各大浏览器的js复制内容到剪切板

    简单实现兼容各大浏览器的js复制内容到剪切板

    相信这个功能大家平时上网经常能碰到，去看了几个常用的网站，都是用的透明flash遮挡“复制到剪贴板”按钮，所以当你点击按钮的时候，点击的其实是flash，然后把你需要复制的内容传入到了flash，最后通过flash的复制功能把传入的内容复制到了剪贴板。
    2015-09-09

最新评论