<!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. 头部尾部始终处于两端（适用于pc端和移动端）

    此代码展示的效果阐述:(随着屏幕宽高度的变化而变化) 当页面内容小于屏幕高度时,头尾分别处在屏幕顶部和屏幕底部: 当页面出现滚动条时,头尾分别处于屏幕顶部和内容底部: <style> *{ ...

  3. 设置DIV随滚动条滚动而滚动

    有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  4. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  5. 让div固定在顶部不随滚动条滚动

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. jQuery 滚动条 滚动到底部（下拉到底部） 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  7. 如何通过JQuery将DIV的滚动条滚动到指定的位置

    这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...

  8. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  9. 当滚动条滚动到页面底部自动加载增加内容的js代码

    这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...

随机推荐

  1. NMAP - A Stealth Port Scanner--reference

    http://nmap.org/bennieston-tutorial/ 实例:nmap -sP 192.168.21.* Contents 1  Introduction Nmap is a fre ...

  2. 记一次走心One 2 One沟通

    聊的比较零零碎碎,内容比较散,有些solution不错,记一些要点吧(1)要学会汇报,就是坐你身边的人,也未必知道你在干啥 三个人都在砌墙.当人们分别问他们在做什么,他们的答案却不一样:第一个人头也没 ...

  3. EveryThing 使用方法

    1.按照时间范围:datetimed: <*.doc|*.docx>  dm:1/2015-6/2015// 如果本地的时间设置是年份在前,那么把年份放在月份前面// d: <*.d ...

  4. NetMQ：.NET轻量级消息队列

    前言 首先我现在是在一家游戏工作做服务端的,这几天我们服务端游戏做了整个底层框架的替换,想必做过游戏的也都知道,在游戏里面会有很多的日志需要记录,量也是比较大的:在没有换框架之前我们存日志和游戏运行都 ...

  5. Linux常用命令语法+示例

    原文出自:https://blog.csdn.net/seesun2012 Linux常用命令:Linux查看日志命令总结:Tomcat相关:Linux配置网卡,连接外网:Linux下安装JDK:Li ...

  6. number_formate 货币金额或数量格式化

    $row['formated_goods_price']    = number_format($row['goods_price'], 2, '.', ''); number_format() 函数 ...

  7. CSS 2D转换

    转换是使元素改变形状.尺寸和位置的一种效果.通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸,可以大致分为2D转换和3D转换.下面介绍的是2D转换的相关知识点. 首先,CSS中2D ...

  8. 清楚苹果 iPai端按钮默认样式

    input[type="button"], input[type="submit"], input[type="reset"] { -web ...

  9. C# Winform中的ComboBox控件绑定数据库项目作为列表内容

    //初始化院区下拉列表,使用了Oracle数据库中的表项目 try { //string connString = "User=system;Password=manager;Data So ...

  10. GitHub教程(二) 删除已有仓库

    通过GitHub教程(一)的阅读,我相信您对GitHub体系框架已经有了模模糊糊的了解.本节教程将继续介绍GitHub的操作---删除仓库. 作为GitHub的入门使用者,我们可能会建一些简单的仓库来 ...