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


Posted in Javascript onSeptember 05, 2016

本文实例讲述了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实现页面下拉100像素出现悬浮窗口的方法

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

Javascript 相关文章推荐
javascript下IE与FF兼容函数收集
Sep 17 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
详解一个基于套接字实现长连接的express
Mar 28 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 #Javascript
AngularJS实现标签页的两种方式
Sep 05 #Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 #Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 #Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 #Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 #Javascript
JS简单随机数生成方法
Sep 05 #Javascript
You might like
Protoss魔法科技
2020/03/14 星际争霸
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
JavaScipt基本教程之前言
2008/01/16 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
JavaScript中的事件委托及好处
2016/07/12 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
python 判断自定义对象类型
2009/03/21 Python
python解析json实例方法
2013/11/19 Python
Python re模块介绍
2014/11/30 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
python频繁写入文件时提速的方法
2019/06/26 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
python在不同条件下的输入与输出
2020/02/13 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
python实现银行账户系统
2021/02/22 Python
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
社区文艺活动方案
2014/08/19 职场文书
解除施工合同协议书
2014/10/17 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
先进班集体申报材料
2014/12/26 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android