<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        body{

            height:1900px;

        }

        .cc{

            position:absolute;

            width:80px;

            height:120px;/*高度值可设置，也可通过内容自动填充*/

            background:green;

            right:0;

            top:50%;

        }

    </style>

    <script src="jquery-1.11.3.min.js"></script>

    <script>

        $(function(){

            function roll(){

                var $win=$(window).height(),$scroll=$(document).scrollTop(),$cc=$(".cc"),$height=$cc.height();

                $cc.animate({"top":$win/2+$scroll-$height/2},100)

            }

            roll();

            $(window).on("scroll",function(){

                roll();

            })

        })

    </script>

</head>

<body>

<div class="cc"></div>

</body>

</html>

类似qq的浮动窗口 ，随着滚轴的滚动，始终处于屏幕的中间（能看到运动的过程）的更多相关文章

  1. 随滚动条滚动，始终处于屏幕的中间类似qq的浮动窗口 （能看到运动的过程）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. QQ右下角浮动窗口

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  3. jq判断鼠标滚轴向上滚动还是向下滚动

    $(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.originalEvent.wh ...

  4. Jquery 类似新浪微博，鼠标移到头像，用浮动窗口显示用户信息，已做成一个jquery插件

    请注意!!!!! 该插件demo PHP 的 demo下载  C#.NET的demo下载 需要如下图, 1.鼠标移动到头像DIV时,Ajax获取数据,并让浮动DIV显示出来. 2.鼠标可以移动到上面浮 ...

  5. 用C#代码实现类似QQ窗体的“上、左、右”停靠功能

    大家都知道QQ有一个自动停靠功能,即“上.左.右”,当你把窗体拖到屏幕边缘,然后移开鼠标它会自动缩放,然后只显示一小小点出来,我们仔细观察会发现其实它只露3像素左右的边缘,当你鼠标移上去它又会伸出来, ...

  6. [C# 网络编程系列]专题九：实现类似QQ的即时通信程序

    转自:http://www.cnblogs.com/zhili/archive/2012/09/23/2666987.html 引言: 前面专题中介绍了UDP.TCP和P2P编程,并且通过一些小的示例 ...

  7. WinForm实现类似QQ停靠，显示隐藏过程添加特效效果

    原文:WinForm实现类似QQ停靠,显示隐藏过程添加特效效果 这可能是个老题长谈的问题了,只是在项目中会用到这个效果,所以今天做个记录.大家见了别喷我.在项目中的需求是这样的. 打开程序,在屏幕的右 ...

  8. Delphi 悬浮窗口、浮动窗口的实现

    源:Delphi 悬浮窗口.浮动窗口的实现 浮动窗体的实现 http://blog.tianya.cn/blogger/post_show.asp?BlogID=68097&PostID=80 ...

  9. 详解C# 网络编程系列：实现类似QQ的即时通信程序

    https://www.jb51.net/article/101289.htm 引言: 前面专题中介绍了UDP.TCP和P2P编程,并且通过一些小的示例来让大家更好的理解它们的工作原理以及怎样.Net ...

随机推荐

  1. C语言 ---- 数组 iOS学习-----细碎知识点总结

    #pragma mark - 数组:用来存放同一数据类型的数据 // 数组的定义:类型说明符 数组名[常量表达式] = {值1, 值2, 值3...};    // 定义一个float类型的数组,用来 ...

  2. Web前端工程师成长之路

    一.何为Web前端工程师?        前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/D ...

  3. The tag 'DataGridTextColumn' does not exist in XML namespace ....

    错误 10 The tag 'DataGridTextColumn' does not exist in XML namespace 'http://schemas.microsoft.com/win ...

  4. c# 中几个关于string问题

    1.string是一个应用类型,而不是值类型:为什么用起来很像值类型?因为微软对其做了特殊处理. 2. using System; namespace testForString { class Pr ...

  5. LNK1169: one or more multiply defined symbols found

    The build failed due to multiple definitions of one or more symbols. This error is preceded by error ...

  6. Scala-Trait:混入与多态

    Scala 的 Trait 结合了抽象类与接口的能力,通过混入来获得灵活的多态能力. 代码如下所示: FileAbility 提供了读取文件.处理文件的能力, 其中继承一个空实现的 Trait:Lin ...

  7. php中rsa加密及解密和签名及验签

    加密的内容长度限制为密钥长度少位,如位的密钥最多加密的内容为个长度. 公钥加密 $public_content=file_get_contents(公钥路径); $public_key=openssl ...

  8. php中curl模拟浏览器来传输数据

    cURL可以使用URL的语法模拟浏览器来传输数据, 因为它是模拟浏览器,因此它同样支持多种协议,FTP, FTPS, HTTP, HTTPS, GOPHER, TELNET, DICT, FILE 以 ...

  9. free查看可用缓存

    本篇转自:http://www.cnblogs.com/coldplayerest/archive/2010/02/20/1669949.html 解释一下Linux上free命令的输出. 下面是fr ...

  10. didFinishLaunchingWithOptions

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...