<!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. Visual Studio中修改项目的输出目录

    1. 如在Solution中的项目名称为 ProjectA 但在本地目录显示却想换成: MyProject 2. 应该做的修改是: 2.1. 将本地目录的 ProjectA手动修改成 MyProjec ...

  2. 使用C#委托来实现异步编程

    最近在我参与的几个.Net项目中都有用到异步编程,作为一名.Net小白,很有必要好好地学习一下异步编程. 什么是异步编程 异步编程指的就是不用阻塞当前线程来等待任务的完成,而是将任务扔到线程池中去执行 ...

  3. css样式、js2种方式 控制字符个数，多余的字用省略号代替

    大家好,我是小菜 前端 ,技术不高,正在努力中充电!希望大家多多指教:css <div class="show">大家好,我是小菜 前端 ,技术不高,正在努力中充电!希 ...

  4. 借助 CORS 从 JavaScript 使用 API 应用

    应用服务提供内置的跨域资源共享 (CORS) 支持,可让 JavaScript 客户端对 API 应用中托管的 API 进行跨域调用.应用服务允许配置对 API 的 CORS 访问,无需在 API 中 ...

  5. 2.Windows服务-->安装卸载服务

    1.使用vs组件“VS2012开发人员命令提示” 工具,进行安装卸载服务(必须以“管理员身份运行") 安装和卸载的时候选择合适的安装程序工具地址,例如: 安装服务:C:\Windows\Mi ...

  6. explode 把字符串打散为数组

    // 显示的字段列表 $smarty->assign('field_show', explode(',',$list_name)); explode(separator,string,limit ...

  7. Mybatis插入、查询自定义的数据类型的方式

    1.首先创建JavaBean对象 package com.zuo.Mybatis.bean; public class PhoneNumber { private String countryCode ...

  8. 决策树之ID3算法

    一.决策树之ID3算法简述 1976年-1986年,J.R.Quinlan给出ID3算法原型并进行了总结,确定了决策树学习的理论.这可以看做是决策树算法的起点.1993,Quinlan将ID3算法改进 ...

  9. Spring课程 Spring入门篇 6-2 ProxyFactoryBean及相关内容（上）

    1 解析 1.1 类的方式实现各种通知需要实现的接口 1.2 创建Spring aop代理的优点及方法 1.3 代理控制切入点和通知的顺序的代码实现(具体完全实现,见代码2.1) 1.4 代理方式选择 ...

  10. java下double相乘精度丢失问题

    比如 System.out.println(0.14*100); 输出: 14.000000000000002 解决方法: BigDecimal b = new BigDecimal(String.v ...