<!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. Spring Session解决分布式Session问题的实现原理

    使用Spring Session和Redis解决分布式Session跨域共享问题 上一篇介绍了如何使用spring Session和Redis解决分布式Session跨域共享问题,介绍了一个简单的案例 ...

  2. 将forme表单转换为Json对象

    //将Form 表单转换为Json字符串 $.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); ...

  3. php对图片加水印--将文字作为水印加到图片

    方法代码: /**  * 图片加水印(适用于png/jpg/gif格式)  *  * @author flynetcn  *  * @param $srcImg  原图片  * @param $wat ...

  4. 批量查找ip地址归属地脚本

    #!/bin/bash ip_list=`cat $1` for i in $ip_listdocurl http://www.ip.cn/index.php?ip=$idoneexit 0

  5. 转发与重定向的区别(forward与redirect的区别)

    转发:服务器接收到客户端的请求后,在服务器内部传递的过程.最后回复结果给客户端. 重定向:服务器接收到客户端的请求后,回复一个新url给客户端,客户端跳转新url.

  6. [android] android项目架构

    准备步骤: 1.创建工程(设置版本兼容,最低兼容版本) 2.导入常用jar包,(处理字符串和加密用的jar文件) Commons Lang,Commons Codec commons-codec.ja ...

  7. <<数学传奇>>概述

    简介 在网易公开课上看完了蔡天新教授的<<数学传奇>>,课程共10集.分别讲述了古希腊的毕达哥拉斯.波斯(伊朗)的 花拉子密和欧玛尔.海亚姆.中国的秦九韶.英国的牛顿.法国的笛 ...

  8. 将一个数据库中表的数据导入另一个数据库（DB2）

    将一个数据库中的数据导入另一个数据库(DB2) 我这里举得例子是使用的DB2数据库,其他数据库思路也是这样啦! 1.从db2 数据库中将表中的数据导入本地的excel中 export to d:\my ...

  9. javascript之Array()数组函数讲解

    Array()是一个用来构建数组的内建构造器函数.数组主要由如下三种创建方式: array = new Array() array = new Array([size]) array = new Ar ...

  10. Java接口和抽象类理解（New）

    一. 抽象类和接口的特点  包含抽象方法的类称为抽象类,但并不意味着抽象类中只能有抽象方法,它和普通类一样,同样可以拥有成员变量和普通的成员方法.注意,抽象类和普通类的主要有三点区别: 1)抽象方法必 ...