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

2024-03-04 23:26:11

本文实例讲述了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" style="border:1px solid #454545; width:150px; height:400px; position: absolute; right: 20px; top: 100px;">
  右侧悬浮层
</div>
</body>
</html>

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

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

使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框

使用jQuery UI的tooltip()函数,可以使悬浮提示框不再那么千篇一律.点击这里先看看效果吧:http://www.keleyi.com/keleyi/phtml/tooltip/ 以下是完整代码:保存到html文件打开也可以看效果. 复制代码代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; cha
鼠标悬浮显示二级菜单效果的jquery实现

1.布局: <div class="show"> <img src="~/images/head_icon.png" /> <div class="drop" style=" display:none; z-index:80000" id="profileMenu"> <ul> <li> <a class="pass" s
jquery悬浮提示框完整实例

本文实例讲述了jquery悬浮提示框实现方法.分享给大家供大家参考,具体如下: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function() { x = 5; y = 15; $("p").hover
jQuery实现悬浮在右上角的网页客服效果代码

本文实例讲述了jQuery实现悬浮在右上角的网页客服效果代码.分享给大家供大家参考,具体如下: 这是款网页在线客服代码,应用了jquery插件,兼容性不错.默认状态下,客服只显示一个图片Button,用鼠标点击时展开全部内容,可用作QQ客服,售后客服等,可以作为网站快速通道,方便用户进行相应的操作. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-top-wen-online-demo/ 具体代码如下: <!DOCTYP
jQuery简单实现页面元素置顶时悬浮效果示例

本文实例讲述了jQuery简单实现页面元素置顶时悬浮效果的方法.分享给大家供大家参考,具体如下: 一.JS Code: <script type="text/javascript"> $.fn.smartFloat = function () { var position = function (element) { var top = element.position().top, pos = element.css("position"); $(wi
jQuery鼠标悬浮链接弹出跟随图片实例代码

本文章介绍了一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等,下面是代码实例: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>我们</title> <style type="text/css"> body{ margin:0
jquery鼠标放上去显示悬浮层即弹出定位的div层

复制代码代码如下: <script language="javascript" src="jquery-1.4.2.min.js"></script> <script> function show(obj,id) { var objDiv = $("#"+id+""); $(objDiv).css("display","block"); $(objD
自定义一个jquery插件[鼠标悬浮时候出现说明label]

最近在学习jquery,看了几天,决定做个小东西练练手.入门级的可以看看. 先看下面这个小东西有什么功能,有模有用. 功能:当你鼠标悬浮在你的html元素上面的时候,它会显示一个help说明性的label. 效果图: 原始: 当你的鼠标悬浮在'单击我吧1'时: 当你的鼠标悬浮在'textbox'时: 看了效果图,若是有兴趣的话,仔细看看代码吧,代码有注释 html 代码: 复制代码代码如下: <%@ Page Language="C#" AutoEventWireup=&quo
jquery实现的可隐藏重现的靠边悬浮层实例代码

本实例使用jquery操作div的CSS,实现了可隐藏重现的靠边悬浮层,预览效果网址:http://www.keleyi.com/keleyi/phtml/xuanfudiv/ 本实例使用到jquery添加移除类的两个方法,详细介绍请参考网址:http://www.keleyi.com/a/bjac/e9e40a974de5a902.htm 下面给出完整代码,保存到html文件可查看效果. 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
jquery实现鼠标悬浮停止轮播特效

本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>轮播图①(手动点击轮播)</title> <link type="text/css" rel="stylesheet&

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

相关推荐

随机推荐