<!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. 本地IDC机房数据库容灾解决方案

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云数据库 TencentDB 发表于云+社区专栏 作者介绍:李明,腾讯云数据库架构师华南区负责人,曾在某专业数据库服务商.51jo ...

  2. Java web验证码

    绘制验证码的主要步骤: 1,设置宽度高度,验证码个数,干扰线个数,可选字符,背景颜色,字体格式 2,画干扰线,随机生成颜色,字体,字符 3,设置缓冲区,得到画笔,设置边框,读写数据,存储图片. 1,S ...

  3. gihub简单学习 步步操作（简单易学）

    一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以 ...

  4. 从 JDK 源码角度看 Object

    Java的Object是所有其他类的父类,从继承的层次来看它就是最顶层根,所以它也是唯一一个没有父类的类.它包含了对象常用的一些方法,比如getClass.hashCode.equals.clone. ...

  5. 如何制作Win10系统U盘安装镜像

    准备的工具: 1.空间8G以上的U盘一个 2.系统镜像文件(ISO格式)下载:https://msdn.itellyou.cn/ 3.UltraISO 下载:https://cn.ultraiso.n ...

  6. MemcacheHelper.cs

    using Memcached.ClientLibrary; using System; using System.Collections.Generic; using System.Linq; us ...

  7. redis(9)集群搭建

    一.搭建流程 以下我们将构建这样一个redis集群:三个主节点,分别备有一个从节点,主节点之间相互通信,如果主节点挂掉,从节点将被提升为主节点. redis集群至少需要3个redis实例 那么我们需要 ...

  8. Java API 之 Properties 类

    1.简介 在项目中我们经常看到一种格式极其干净的配置文件,如:config.properties.在Java的体系结构中也提供了API对properties文件进行读取和写入等操作,即:Propert ...

  9. springboot+mybatis+thymeleaf+docker构建的个人站点开源项目（集成了个人主页、个人作品、个人博客）

    前言 My Site 主要功能有:个人首页.个人作品.个人博客为一体的站点,网站的文章和作品均由markdown进行编写,可以满足你的基本需求.如果觉得这个项目不错,请为它点赞支持. 项目架构 JDK ...

  10. 编写简单的maven插件

    编写一个简单的输出maven的hello world的插件 1.在eclipse中新建一个maven project项目 然后取名HelloPlugin,建立后,pom文件为(注意packaging为 ...