随滚动条滚动,始终处于屏幕的中间类似qq的浮动窗口 (能看到运动的过程)
<!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的浮动窗口 (能看到运动的过程)的更多相关文章
- 类似qq的浮动窗口 ,随着滚轴的滚动,始终处于屏幕的中间(能看到运动的过程)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 头部尾部始终处于两端(适用于pc端和移动端)
此代码展示的效果阐述:(随着屏幕宽高度的变化而变化) 当页面内容小于屏幕高度时,头尾分别处在屏幕顶部和屏幕底部: 当页面出现滚动条时,头尾分别处于屏幕顶部和内容底部: <style> *{ ...
- 设置DIV随滚动条滚动而滚动
有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题 在IE6,IE7下,子元素使用position:relati ...
- 让div固定在顶部不随滚动条滚动
让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据
1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...
- 如何通过JQuery将DIV的滚动条滚动到指定的位置
这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...
- js网页滚动条滚动事件实例分析
本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...
- 当滚动条滚动到页面底部自动加载增加内容的js代码
这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...
随机推荐
- Ubuntu apache
Linux系统为Ubuntu 1. 启动apache服务 # /etc/init.d/apache2 start 2. 重启apache服务 # /etc/init.d/apache2 restart ...
- 最小化安装的redhat/centos安装gnome桌面
因系统版本和语言环境不同,安装包的名字会有所差别 安装方式可以选择直接联网安装,也可以加载dvd镜像源安装,这里针对配置redhat/centos本地dvd的yum源做个记录: 1.复制 redhat ...
- Java给树加子节点个数统计
通过后台实现 private List<Photo> getChildren(Photo photo) { List<Photo> children = new ArrayLi ...
- 深入理解JavaScript系列(39):设计模式之适配器模式
介绍 适配器模式(Adapter)是将一个类(对象)的接口(方法或属性)转化成客户希望的另外一个接口(方法或属性),适配器模式使得原本由于接口不兼容而不能一起工作的那些类(对象)可以一些工作.速成包装 ...
- AngularJS的基础知识
一.AngularJS指令与表达式 [AngularJS常用指令]1.ng-app:声明Angular所管辖的区域,一般写在body或HTML上,原则上一个页面只有一个.2.ng-model:把元素值 ...
- [android] 网络链接类型和渠道
1.实现方式 1.1使用HttpUrlConnection 1.2使用HttpClient 1.3使用Socket,比如:豌豆荚,聊天工具 2.通讯渠道 2.1 WLAN(wi-fi),100米左右的 ...
- spring 代理
java动态代理实现 1. Java自带的动态代理,反射生成字节码 2. Cglib调用asm生成子类 spring 中代理实现 1. 如果类实现了接口,使用java动态代理 2. 没有实现接口,使用 ...
- [Java反射基础二]获取类的信息
本文接上文“Class类的使用”,以编写一个用来获取类的信息(成员函数.成员变量.构造函数)的工具类来讲解"反射之获取类的信息" 1.获取成员函数信息 /** * 获取成员函数信息 ...
- C 堆内存管理
在Win32 程序中每个进程都占有4GB的虚拟地址空间,这4G的地址空间内部又被分为代码段,全局变量段堆段和栈段,栈内存由函数使用,用来存储函数内部的局部变量,而堆是由程序员自己申请与释放的,系统在管 ...
- SVN认证失败的错误分析
作者:朱金灿 来源:http://blog.csdn.net/clever101 时常碰见SVN认证失败的问题,经过一番思考,可以总结出错误根源是:在SVN的数据库目录下有一个svnserve.con ...