<!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. C 标准库 - string.h之strncpy使用

    strncpy 把 src 所指向的字符串复制到 dest,最多复制 n 个字符.当 src 的长度小于 n 时,dest 的剩余部分将用空字节填充. char *strncpy(char *dest ...

  2. [PY3]——根据某个特定的字段来分组迭代访问一个字段或序列？/ itertools.groupby( )函数

    问题 你有一个字典或者实例的序列,然后你想根据某个特定的字段(比如‘date’)来分组迭代访问. 解决方案 itertools.groupby( )函数 itertools.groupby(rows, ...

  3. [转]微信小程序填坑之路之使用localhost在本地测试

    本文转自:http://www.wxappclub.com/topic/798

  4. 自己实现async和await

    无意当中看了一些博文,说有人想自己尝试实现基于异步操作的方法: 1)直接使用Task(不说咯,这个是微软给我们的标准实现方法). 2)必须继承INotifyCompletion接口,同时自己实现IsC ...

  5. 提示"No 'Access-Control-Allow-Origin' header"及Spring 中解决跨域问题

    问题描述 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://12 ...

  6. PHP+MySql实现图书管理系统

    这个图书管理系统是我学完PHP时写的一个练手项目,功能参考了自己学校的图书管理系统.为了锻炼自己的动手能力以及加深对代码的理解,前端和后端均由自己完成,前端使用了一些基本的框架(毕竟我主攻后端开发方向 ...

  7. JavaScript AMD 与CMD的代码区别

    1:CMD 依赖就近 define(function(require,export) { var b =1; var a = require("../a"); a.dosometh ...

  8. 获取页面z-index最大值

    getMaxZIndex = function () { var maxZ = Math.max.apply(null, $.map($('body *'), function(e,n) { if ( ...

  9. window onload || jquery $()

    1.window 的 onload 机制只指定一个函数,且在页面DOM及静态资源加载完之后执行: window.onload = function(){ alert(); } 2.$(document ...

  10. 谈谈HTML5中的history.pushSate方法，弥补ajax导致浏览器前进后退无效的问题

    移动端为了减少页面请求,有时候需要通过单页面做成多页面的效果,最近有这么个需求,表单填完后执行第一步,然后执行第二步,第二步执行完后再执行第三步,每一步都要保留之前的数据.这种情况用单页面实现再合适不 ...